如何使用jqplot描绘一个简单的线形图？

简介

jqplot是一个jQuery插件生成纯客户端的javascript，并显示在网页中的图表。

jqplot官网：http://www.jqplot.com/。

创建一个简单的线形图

1.引用jqplot的相关文件。

 1 <!--[if lt IE 9]>
 2 
 3 <script language="javascript" type="text/javascript" src="excanvas.js"></script>
 4 
 5 <![endif]-->
 6 
 7 <script language="javascript" type="text/javascript" src="jquery.min.js"></script>
 8 
 9 <script language="javascript" type="text/javascript" src="jquery.jqplot.min.js">
10 
11 </script> <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />

View Code

2.添加一个div作为绘图容器。

1 <div id="chartdiv" style="height:400px;300px; "></div>

View Code

建议：设置合适的高度和宽度。

3.创建一个线形图。

1 $(document).ready(function () {
2 var plot = $.jqplot('chartdiv', [[3, 7, 9, 1, 4, 6, 8, 2, 5]]);
3 });

View Code

注意：调用jqplot的目标与容器的id对应。

效果如图：