图标绘制工具-Jqplot（1）

简介

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

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

创建图形

1.引用jqplot的相关文件。

 <!--[if lt IE 9]>
 <script language="javascript" type="text/javascript" src="excanvas.js"></script>
 <![endif]-->

<script type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js">
</script> <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />

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

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

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

3.创建一个线形图。

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

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

效果如图：