使用jQuery jqPlot插件绘制柱状图

在一个项目研发过程中，需要显示账户的资金情况，为了给客户良好的体验我们采用了柱状图形展现，绘图的过程如果使用原生态脚本绘制这样比较麻烦，时间也会比较长，所以我们选择了演示地址插件进行绘制，这样可以节省大量的时间，也能很快就能展示给用户。

插件官方地址：http://www.jqplot.com/

具体实现如下：

引用射流研究…文件：

复制代码代码如下：链接href=' ~/Scripts/asset/jqplot/jquery。jqplot。量滴CSS ' rel='样式表/link href=' ~/Scripts/asset/jqplot/syntaxhighlight/style/shcore default。量滴CSS ' rel='样式表/link href=' ~/Scripts/asset/jqplot/syntaxhighlight/style/shthemejqplot。量滴CSS ' rel='样式表'/脚本src=' http 3360 ~ '代码

复制代码代码如下： div id=' chart 1 ' class=' box '/div

爪哇岛描述语言脚本：

复制代码代码如下： var图表条=function(){ var数据={ param 1: param 1，param 2: param 2 }；//传递参数$('#chart1 ').html(" ")；//绘图DIV var s1$。ajax({ type: 'POST '，url: './Home/AccountSum '，data:数据，datatype: 'json '，async: false，success :函数(d){ if(d . flag){ S1=[parseFloat(d . data。total 1)、parseFloat(d.data.Total2)、parseFloat(d.data.Total3)、parseFloat(d.data.Total4)、parseFloat(d.data.Total5)、parseFloat(d.data。合计6)]；} else { s1=[0.00，0.00，0.00，0.00，0.00，0.00]；} $ .jqplot。配置。enableplugins=truevar ticks=['充值', '提款', '应收', '销售', '退票', '验证'];var plot1=$ .jqplot('chart1 '，[s1]，{ //仅当我们不使用excanvas时才动画化（不在IE 7或IE 8中).//animate:$.jqplot.use_excanvas，系列默认值3360 { point labels : { show : true }，shadow: false，showMarker: true，//是否强调显示图中的数据节点渲染器：美元。jqplot。barrender，rendererooptions 3360 {条形宽度： 50，barMargin: 50 } }，坐标轴： { xaxis 3360 { show : true，//是否自动显示坐标轴渲染：美元。jqplot。categoryaxisrender，ticks: ticks，showTicks: true，//是否显示刻度线以及坐标轴上的刻度值showTickMarks: true，//设置是否显示刻度tickOptions: { show: true，fontSize: '14px '，fontFamily: 'tahoma，arial，' Hiragino Sans GB '，宋体b8b体'无衬线，showLabel: true，//是否显示刻度线以及坐标轴上的刻度值showMark: false，//设置是否显示刻度showGridline: false //是否在图表区域显示刻度值方向的网格} }，yaxis: { show: true，showTicks: false，//是否显示刻度线以及坐标轴上的刻度值showTickMarks: false，//设置是否显示刻度autoscale: true，borderWidth: 1，tickOptions: { show: true，showLabel: false，showMark: false，showGridline: true，格式字符串3360 ' %。2f ' } }，}，网格： {绘制网格线： true，绘制边框： false，阴影： false，边框颜色： ' # 000000 '，//设置图表的（最外侧)边框的颜色borderWidth: 1 //设置图表的（最外侧)边框宽度}，突出显示： {显示： false } })；}，error: function () { alert('获取图形统计数据失败！');} });};效果图：

今天就写到这里吧，初步看了一下官方上的事例，功能还是蛮强大的，使用也很方便、容易，根据本项目的需求，后续可能还会增加一些。不过在使用过程中也发现了一些问题，部分实现不一定可以满足。