Question

嗨我需要在搜索很长时间后在我的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>

我在这段代码中所犯的错误是什么，并且纠正了我在这个页面中获取图表的问题....提前感谢。

Answer 1

您必须等到加载Div以使用jQuery / jqgraph操作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>

在我的页面中使用jqBarGraph

1 个答案: