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 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
javascript forEach通用循环遍历方法
Oct 11 Javascript
js常用代码段收集
Oct 28 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
javascript类型转换使用方法
Feb 08 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 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中foreach语句控制数组循环的用法
2015/11/30 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
JS编程小常识很有用
2012/11/26 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
vue实现通讯录功能
2018/07/14 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
英国鞋网:Rubber Sole
2020/03/03 全球购物
党员自我评价分享
2013/12/13 职场文书
学校开学标语
2014/10/06 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
就业意向协议书
2015/01/29 职场文书
销售员岗位职责范本
2015/04/11 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python