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 相关文章推荐
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
Javascript 之封装(Package)
Sep 14 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
JavaScript逻辑运算符相关总结
Sep 04 Javascript
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命名空间(namespace)的使用基础及示例
2014/08/18 PHP
php实现的ping端口函数实例
2014/11/12 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
jquery中的过滤操作详细解析
2013/12/02 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
学生个人自我鉴定范文
2014/03/28 职场文书
校园元旦活动总结
2014/07/09 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
七年级数学教学反思
2016/02/17 职场文书
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL