前端之家收集整理的这篇文章主要介绍了
使用jQuery jqPlot插件绘制柱状图，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
在一个项目研发过程中，需要显示账户的资金情况，为了给客户良好的体验我们采用了柱状图形展现，绘图的过程如果使用原生态脚本绘制这样比较麻烦，时间也会比较长，所以我们选择了jqPlot插件进行绘制，这样可以节省大量的时间，也能很快就能展示给用户。
插件官方地址：
具体实现如下：
引用JS文件：
HTML代码
Box">
显示图中的数据节点
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 50,
barMargin: 50
}
},
axes: {
xaxis: {
show: true,//是否
自动显示坐标轴
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
showTicks: true,// 是否
显示刻度线以及坐标轴上的刻度值
showTickMarks: true,//设置是否
显示刻度
tickOptions: {
show: true,
fontSize: '14px',
fontFamily: 'tahoma,arial,"Hiragino Sans GB",宋体b8b体,sans-serif',
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,
formatString: '￥%.2f'
}
},
},
grid: {
drawGridLines: true,
drawBorder: false,
borderColor: '#000000',// 设置图表的(最外侧)边框的颜色
borderWidth: 1 //设置图表的（最外侧）边框宽度
},
Highlighter: { show: false }
});
},
error: function () {
alert("
获取图形
统计数据失败!");
}
});
};
