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 相关文章推荐
一行代码告别document.getElementById
Jun 01 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
JavaScript 是什么意思
Sep 22 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
开启PHP的伪静态模式
2015/12/31 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
javascript smipleChart 简单图标类
2011/01/12 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
python实现数组插入新元素的方法
2015/05/22 Python
python实现自动重启本程序的方法
2015/07/09 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
python中with用法讲解
2020/02/07 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
高中毕业自我鉴定
2013/12/16 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
四风自我剖析材料
2014/09/30 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
七年级作文之环保作文
2019/10/17 职场文书
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers