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(){
   $('#stackedBarChart').highcharts({
     chart: {
       type: 'bar'
     },
     title: {
       text: '堆条状图'
     },
     xAxis: {
       categories: ['苹果', '橘子', '梨子', '葡萄', '香蕉']
     },
     yAxis: {
       min: 0,
       title: {
         text: '水果销量'
       }
     },
     legend: {
       backgroundColor: '#FFFFFF',
       reversed: true
     },
     plotOptions: {
       series: {
         stacking: 'normal'
       }
     },
       series: [{
       name: '星期一',
       data: [50, 34, 45, 77, 28]
     }, {
       name: '星期二',
       data: [92, 32, 43, 22, 61]
     }, {
       name: '星期三',
       data: [83, 44, 54, 12, 59]
     }, {
       name: '星期四',
       data: [63, 94, 67, 23, 12]
     }, {
       name: '星期五',
       data: [57, 64, 24, 37, 98]
     }, {
       name: '星期六',
       data: [34, 12, 44, 65, 32]
     }, {
       name: '星期日',
       data: [67, 47, 23, 96, 23]
     }]
   });
 });
</script>
</head>
<body>
  <div id="stackedBarChart" style="width: 1200px; height: 550px; margin: 0 auto"></div>
</body>
</html>

2、运行结果

jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】

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

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

Javascript 相关文章推荐
Javascript中自动切换焦点实现代码
Dec 15 Javascript
js查找节点的方法小结
Jan 13 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 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
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 #Javascript
You might like
php类
2006/11/27 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
jQuery 性能优化指南 (1)
2009/05/21 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
Python中的pprint折腾记
2015/01/21 Python
Python中datetime模块参考手册
2017/01/13 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
管理部部长岗位职责
2013/12/05 职场文书
大学生求职自荐信
2013/12/12 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
会走路的树教学反思
2014/02/20 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
趣味运动会口号
2015/12/24 职场文书
简历自我评价范文
2019/04/24 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
JS数组去重详情
2021/11/07 Javascript