使用jQuery jqPlot插件绘制柱状图


Posted in Javascript onDecember 18, 2014

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

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

具体实现如下:

引用JS文件:

 <link href="~/Scripts/asset/jqplot/jquery.jqplot.min.css" rel="stylesheet" />

 <link href="~/Scripts/asset/jqplot/syntaxhighlighter/styles/shCoreDefault.min.css" rel="stylesheet" />

 <link href="~/Scripts/asset/jqplot/syntaxhighlighter/styles/shThemejqPlot.min.css" rel="stylesheet" />

 <script src="~/Scripts/asset/jquery-1.10.2.min.js"></script>

 <script type="text/javascript" src="~/Scripts/asset/jqplot/jquery.jqplot.min.js" class="include"></script>

 <script type="text/javascript" src="~/Scripts/asset/jqplot/syntaxhighlighter/scripts/shCore.js"></script>

 <script type="text/javascript" src="~/Scripts/asset/jqplot/syntaxhighlighter/scripts/shBrushJScript.js"></script>

 <script type="text/javascript" src="~/Scripts/asset/jqplot/syntaxhighlighter/scripts/shBrushXml.js"></script>

 <script type="text/javascript" src="~/Scripts/asset/jqplot/excanvas.min.js"></script>

 <script type="text/javascript" src="~/Scripts/asset/jqplot/plugins/jqplot.barRenderer.min.js"></script>

 <script type="text/javascript" src="~/Scripts/asset/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>

 <script type="text/javascript" src="~/Scripts/asset/jqplot/plugins/jqplot.pointLabels.min.js"></script>

Html代码

<div id="chart1" class="box"></div>

Javascript脚本:

 var chartBar = function () {

         var data={param1:param1,param2:param2};//传递参数

         $("#chart1").html("");//绘图DIV

         var s1;

         $.ajax({

             type: "POST",

             url: '../Home/AccountSum',

             data: data,

             datatype: "json",

             async: false,

             success: function (d) {

                 if (d.flag) {

                     s1 = [parseFloat(d.data.Total1), parseFloat(d.data.Total2), parseFloat(d.data.Total3), parseFloat(d.data.Total4), parseFloat(d.data.Total5), parseFloat(d.data.Total6)];

                 } else {

                     s1 = [0.00, 0.00, 0.00, 0.00, 0.00, 0.00];

                 }

                 $.jqplot.config.enablePlugins = true;

                 var ticks = ['充值', '提款', '应收', '销售', '退票', '验证'];

                 var plot1 = $.jqplot('chart1', [s1], {

                     // Only animate if we're not using excanvas (not in IE 7 or IE 8)..

                     //animate: !$.jqplot.use_excanvas,

                     seriesDefaults: {

                         pointLabels: { show: true },

                         shadow: false,

                         showMarker: true, // 是否强调显示图中的数据节点

                         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,

                         shadow: false,

                         borderColor: '#000000',     // 设置图表的(最外侧)边框的颜色

                         borderWidth: 1           //设置图表的(最外侧)边框宽度  

                     },

                     highlighter: { show: false }

                 });

             },

             error: function () {

                 alert("获取图形统计数据失败!");

             }

         });

     };

效果图:

使用jQuery jqPlot插件绘制柱状图

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

Javascript 相关文章推荐
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
小程序中this.setData的使用和注意事项
Aug 28 Javascript
js异步接口并发数量控制的方法示例
Nov 22 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 #Javascript
使用JS获取当前地理位置方法汇总
Dec 18 #Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 #Javascript
node.js中的fs.chmod方法使用说明
Dec 18 #Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 #Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 #Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 #Javascript
You might like
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
8个PHP数组面试题
2015/06/23 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
jQuery代码优化 遍历篇
2011/11/01 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
python实现各进制转换的总结大全
2017/06/18 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
印度购物网站:TATA CLiQ
2017/11/23 全球购物
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
开办化妆品公司创业计划书
2013/12/26 职场文书
经典广告词大全
2014/03/14 职场文书
劳资协议书范本
2014/04/23 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
硕士学位申请报告
2015/05/15 职场文书
同意离婚答辩状
2015/05/22 职场文书
教师工作证明范本
2015/06/12 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL
Python中字符串对象语法分享
2022/02/24 Python