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控制iframe滚动的代码
Apr 10 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
JS中的作用域链
Mar 01 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
javascript实现点击小图显示大图
Nov 29 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下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
js调试工具Console命令详解
2014/10/21 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
Django日志模块logging的配置详解
2017/02/14 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
python获取多线程及子线程的返回值
2017/11/15 Python
Django实现网页分页功能
2019/10/31 Python
3种python调用其他脚本的方法
2020/01/06 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
jupyter notebook清除输出方式
2020/04/10 Python
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
财务人员个人自荐信范文
2013/09/26 职场文书
双方协议书
2014/04/22 职场文书
毕业论文评语大全
2014/04/29 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
如何写好竞聘报告
2019/04/03 职场文书
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs