官网主页:http://www.jqplot.com/
示例:http://www.jqplot.com/tests/
下载页面:http://bitbucket.org/cleonello/jqplot/downloads/
1.导入核心js 和 css
<link rel="stylesheet" type="text/css" href="./jquery.jqplot.css" />
<!--[if IE]><script language="javascript" type="text/javascript" src="./excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="./jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="./jquery.jqplot.js"></script>
2.添加显示图表的容器
div id="chart" style="margin-top:20px; margin-left:20px; width:460px; height:500px;"></div>
3.导入插件包中的js
bar也即柱状图
<script type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
(1)
line1 = [1,4,9, 16];
line2 = [25, 12.5, 6.25, 3.125];
plot1 = $.jqplot('chart1', [line1, line2], {
legend:{show:true, location:'ne'},title:'Bar Chart',
series:[
{label:'Profits', renderer:$.jqplot.BarRenderer},
{label:'Expenses', renderer:$.jqplot.BarRenderer}
],
axes:{
xaxis:{renderer:$.jqplot.CategoryAxisRenderer},
yaxis:{min:0}
}
});
待续。。。。。。。。。。