使用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插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
javascript无刷新评论实现方法
May 13 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 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 Undefined index和Undefined variable的解决方法
2008/03/27 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
Python中字典和JSON互转操作实例
2015/01/19 Python
Python实现删除文件但保留指定文件
2015/06/21 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
python daemon守护进程实现
2016/08/27 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
python生成并处理uuid的实现方式
2020/03/03 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
韩语专业本科生求职信
2013/10/01 职场文书
期末总结的个人自我评价
2013/11/02 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
安全教育培训心得体会
2016/01/15 职场文书
mysql查询结果实现多列拼接查询
2022/04/03 MySQL
Python字符串的转义字符
2022/04/07 Python