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中注释语句的正则表达式
Jun 11 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
vue配置多页面的实现方法
May 22 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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
NT IIS下用ODBC连接数据库
2006/10/09 PHP
phpmyadmin的#1251问题
2006/11/25 PHP
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
微信小程序实现弹出菜单
2018/07/19 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
pytorch 共享参数的示例
2019/08/17 Python
Python原始套接字编程实例解析
2020/01/29 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
捐助倡议书范文
2014/04/15 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
工作调动申请报告
2015/05/18 职场文书
学生会部长竞选稿
2015/11/19 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL