简介
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" />
2.添加一个div作为绘图容器。
1 <div id="chartdiv" style="height:400px;300px; "></div>
建议:设置合适的高度和宽度。
3.创建一个线形图。
1 $(document).ready(function () { 2 var plot = $.jqplot('chartdiv', [[3, 7, 9, 1, 4, 6, 8, 2, 5]]); 3 });
注意:调用jqplot的目标与容器的id对应。
效果如图: