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(){
   $('#stackedChart').highcharts({
     chart: {
       type: 'column'
     },
     title: {
       text: '堆柱状图'
     },
     xAxis: {
       categories: ['星期一', '星期二', '星期三', '星期四', '星期五','星期六','星期日']
     },
     yAxis: {
       min: 0,
       title: {
         text: '水果销量'
       },
       stackLabels: {
         enabled: true,
         style: {
           fontWeight: 'bold',
           color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
         }
       }
     },
     legend: {
       align: 'right',
       x: -70,
       verticalAlign: 'top',
       y: 20,
       floating: true,
       backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
       borderColor: '#CCC',
       borderWidth: 1,
       shadow: false
     },
     tooltip: {
       formatter: function() {
         return '<b>'+ this.x +'</b><br/>'+
           this.series.name +': '+ this.y +'<br/>'+
           'Total: '+ this.point.stackTotal;
       }
     },
     plotOptions: {
       column: {
         stacking: 'normal',
         dataLabels: {
           enabled: true,
           color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
           style: {
             textShadow: '0 0 3px black, 0 0 3px black'
           }
         }
       }
     },
     series: [{
       name: '苹果',
       data: [58, 31, 49, 12, 35,65,98]
     }, {
       name: '梨子',
       data: [12, 45, 63, 24, 17,87,35]
     }, {
       name: '桃子',
       data: [67, 89, 47, 27, 58,67,34]
     }, {
       name: '橘子',
       data: [54, 36, 78, 64, 35,78,94]
     }]
   });
 });
</script>
</head>
<body>
  <div id="stackedChart" style="width: 1200px; height: 550px; margin: 0 auto"></div>
</body>
</html>

2、运行结果

jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】

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

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

Javascript 相关文章推荐
JS实现判断碰撞的方法
Feb 11 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
Mar 19 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 #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
You might like
PHP的历史和优缺点
2006/10/09 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
Python 详解基本语法_函数_返回值
2017/01/22 Python
python write无法写入文件的解决方法
2019/01/23 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
python实现学生成绩测评系统
2020/06/22 Python
自我评价范文点评
2013/12/04 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
陈欧的广告词
2014/03/18 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
办公室主任个人总结
2015/02/28 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python