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 相关文章推荐
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
seajs下require书写约定实例分析
May 16 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
前端框架学习总结之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
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
PHP日期处理函数 整型日期格式
2011/01/12 PHP
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
深入PHP异步执行的详解
2013/06/03 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
Python通过poll实现异步IO的方法
2015/06/04 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
详解Python自建logging模块
2018/01/29 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
Python猴子补丁知识点总结
2020/01/05 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
世界上最好的帽子:Tilley
2016/11/27 全球购物
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
工程管理造价应届生求职信
2013/11/13 职场文书
银行求职推荐信范文
2013/11/30 职场文书
高三励志标语
2014/06/05 职场文书
单位作风建设自查报告
2014/10/23 职场文书
自我评价优缺点范文
2015/03/11 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB