jqplot插件绘图

 

官网主页：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}
    }
});

 

 

待续。。。。。。。。。。