0

こんにちは、長い間検索した後、HTML ページにグラフを作成する必要があります。jqBarGraph プラグインを使用すると、グラフを簡単に作成できることがわかりました。以下に、私のページのコードを示します。

<html>
<head><script type="text/javascript" src="http://www.workshop.rs/jqbargraph/jquery.js"></script>
<script type="text/javascript" src="http://www.workshop.rs/jqbargraph/jqBarGraph.js"></script>

   <script type="text/javascript">

 arrayOfData = new Array(
     [10.3,'Jan','#f3f3f3'],
     [15.2,'Feb','#f4f4f4'],
     [13.1,'Mar','#cccccc'],
     [16.3,'Apr','#333333'],
     [14.5,'May','#666666']
);
   $('#divForGraph').jqBarGraph({ data: arrayOfData });

   </script>
   </head>
   <body>
   <div id="divForGraph" style="width:100%; height:100%; border:1px solid black;">
   aksdljfkladsjf;oajsdfkmlmnmnk;asdf
   </div>
   </body>
   </html>

このコードで私が犯した間違いは何ですか。このページのグラフをできるだけ早く取得する際に私を修正してください....事前に感謝します。

4

1 に答える 1

1

jQuery / jqgraphを使用してdivコンテンツを操作するには、Divがロードされるまで待つ必要があります。

div がロードされた後にスクリプトを配置します。

また、CSS スタイル ファイルが欠落しているため、追加しました。

以下の固定コードが機能します。

<html>
<head><script type="text/javascript" src="http://www.workshop.rs/jqbargraph/jquery.js"></script>
<script type="text/javascript" src="http://www.workshop.rs/jqbargraph/jqBarGraph.js"></script>
<link rel="stylesheet" href="http://www.workshop.rs/jqbargraph/styles.css" type="text/css" />
   </head>
   <body>
   <div id="divForGraph" style="width:100%; height:100%; border:1px solid black;">
   </div>
   <script type="text/javascript">

 arrayOfData = new Array(
     [10.3,'Jan','#f3f3f3'],
     [15.2,'Feb','#f4f4f4'],
     [13.1,'Mar','#cccccc'],
     [16.3,'Apr','#333333'],
     [14.5,'May','#666666']
);
   $('#divForGraph').jqBarGraph({ data: arrayOfData });

   </script>
   </body>
   </html>

スクリプトをページの下部に移動せずに、これを修正する別の方法があります。または、jQuery を使用$(document).ready()して、ドキュメントが読み込まれるまで待ってから、jqBar スクリプトを実行することもできます。

<html>
<head><script type="text/javascript" src="http://www.workshop.rs/jqbargraph/jquery.js"></script>
<script type="text/javascript" src="http://www.workshop.rs/jqbargraph/jqBarGraph.js"></script>
<link rel="stylesheet" href="http://www.workshop.rs/jqbargraph/styles.css" type="text/css" />

   <script type="text/javascript">
$(document).ready(function() {
   $('#divForGraph').jqBarGraph({ data: arrayOfData });

});
 arrayOfData = new Array(
     [10.3,'Jan','#f3f3f3'],
     [15.2,'Feb','#f4f4f4'],
     [13.1,'Mar','#cccccc'],
     [16.3,'Apr','#333333'],
     [14.5,'May','#666666']
);

   </script>
   </head>
   <body>
   <div id="divForGraph" style="width:100%; height:100%; border:1px solid black;">
   </div>

   </body>
   </html>
于 2012-06-24T08:28:43.463 に答える