在我的页面中使用jqBarGraph

using jqBarGraph in my page

本文关键字：jqBarGraph 我的      更新时间：2023-09-26

嗨，我需要在我的 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>
我在此

代码中犯了什么错误，并纠正我尽快在此页面中获取图形......提前谢谢。

你必须等到 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>
相关文章：