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 相关文章推荐
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
js Math 对象的方法
Sep 01 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 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 whois查询API制作方法
2011/06/23 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
vuex 的简单使用
2018/03/22 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
Python中tell()方法的使用详解
2015/05/24 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
公司接待方案
2014/03/08 职场文书
2014年营销工作总结
2014/11/22 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记