使用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 相关文章推荐
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
用javascript作一个通用向导说明
Aug 30 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
node中短信api实现验证码登录的示例代码
Jan 20 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
生成静态页面的PHP类
2006/07/15 PHP
php学习之运算符相关概念
2011/06/09 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
js的一些常用方法小结
2011/06/29 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
python网络编程学习笔记(四):域名系统
2014/06/09 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
浅谈Python协程
2020/06/17 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
python利用platform模块获取系统信息
2020/10/09 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
一道SQL面试题
2012/12/31 面试题
百度软件工程师职位
2013/02/14 面试题
金融专业个人求职信范文
2013/11/28 职场文书
人事主管岗位职责
2014/01/30 职场文书
公司地址变更通知
2015/04/25 职场文书
实习证明模板
2015/06/16 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript