使用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 相关文章推荐
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
vant时间控件使用方法详解
Dec 24 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/10/09 PHP
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
python绘制彩虹图
2019/12/16 Python
python mock测试的示例
2020/10/19 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
华为C++笔试题
2014/08/05 面试题
品学兼优的大学生自我评价
2013/09/20 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
大学生社会实践评语
2014/04/25 职场文书
工作说明书范文
2014/05/07 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
Vue的生命周期一起来看看
2022/02/24 Vue.js
使用Ajax实现进度条的绘制
2022/04/07 Javascript