jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】


Posted in Javascript onMarch 14, 2017

本文实例讲述了jQuery插件HighCharts绘制的2D堆柱状图效果。分享给大家供大家参考,具体如下:

1、HighCharts之2D堆柱状图源码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D堆柱状图</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
$(function(){
   $('#stackedChart').highcharts({
     chart: {
       type: 'column'
     },
     title: {
       text: '堆柱状图'
     },
     xAxis: {
       categories: ['星期一', '星期二', '星期三', '星期四', '星期五','星期六','星期日']
     },
     yAxis: {
       min: 0,
       title: {
         text: '水果销量'
       },
       stackLabels: {
         enabled: true,
         style: {
           fontWeight: 'bold',
           color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
         }
       }
     },
     legend: {
       align: 'right',
       x: -70,
       verticalAlign: 'top',
       y: 20,
       floating: true,
       backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
       borderColor: '#CCC',
       borderWidth: 1,
       shadow: false
     },
     tooltip: {
       formatter: function() {
         return '<b>'+ this.x +'</b><br/>'+
           this.series.name +': '+ this.y +'<br/>'+
           'Total: '+ this.point.stackTotal;
       }
     },
     plotOptions: {
       column: {
         stacking: 'normal',
         dataLabels: {
           enabled: true,
           color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
           style: {
             textShadow: '0 0 3px black, 0 0 3px black'
           }
         }
       }
     },
     series: [{
       name: '苹果',
       data: [58, 31, 49, 12, 35,65,98]
     }, {
       name: '梨子',
       data: [12, 45, 63, 24, 17,87,35]
     }, {
       name: '桃子',
       data: [67, 89, 47, 27, 58,67,34]
     }, {
       name: '橘子',
       data: [54, 36, 78, 64, 35,78,94]
     }]
   });
 });
</script>
</head>
<body>
  <div id="stackedChart" style="width: 1200px; height: 550px; margin: 0 auto"></div>
</body>
</html>

2、运行结果

jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】

附:完整实例代码点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
javascript常用函数(1)
Nov 04 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
mocha的时序规则讲解
Feb 16 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 #Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 #Javascript
jQuery ajax实现省市县三级联动
Mar 07 #Javascript
Javascript前端经典的面试题及答案
Mar 14 #Javascript
layer弹出层框架alert与msg详解
Mar 14 #Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 #Javascript
利用js定义一个导航条菜单
Mar 14 #Javascript
You might like
PHP怎样调用MSSQL的存储过程
2006/10/09 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
Python中List.index()方法的使用教程
2015/05/20 Python
Python快速从注释生成文档的方法
2016/12/26 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
python实现逻辑回归的方法示例
2017/05/02 Python
深入理解Python中的*重复运算符
2017/10/28 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
肯尼迪就职演说稿
2013/12/31 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
企业党建工作总结2015
2015/05/26 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python