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 相关文章推荐
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
quickjs 封装 JavaScript 沙箱详情
Nov 02 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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
浅谈JS函数节流防抖
2017/10/18 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
Python计时相关操作详解【time,datetime】
2017/05/26 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
缓刑人员的思想汇报
2014/01/11 职场文书
迟到检讨书500字
2014/02/05 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
公司经理任命书
2014/06/05 职场文书
教师师德考核自我评价
2014/09/13 职场文书
市场总监岗位职责
2015/02/11 职场文书
2015年大学生工作总结
2015/04/21 职场文书
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang