使用jQuery jqPlot插件绘制柱状图

前端之家收集整理的这篇文章主要介绍了使用jQuery jqPlot插件绘制柱状图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

  插件官方地址:

  具体实现如下:

  引用JS文件:

代码如下:
  HTML代码

代码如下:
Box">

  Javascript脚本:

代码如下:
显示图中的数据节点 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("获取图形统计数据失败!"); } }); };
  效果图:

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

原文链接:https://www.f2er.com/jquery/56821.html

猜你在找的jQuery相关文章