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 相关文章推荐
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
JS去掉字符串中所有的逗号
Oct 18 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 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 8小时时间差的解决方法小结
2009/12/22 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
Firefox window.close()的使用注意事项
2009/04/11 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
python实现提取百度搜索结果的方法
2015/05/19 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
NumPy 数组使用大全
2019/04/25 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
《童年》教学反思
2014/02/18 职场文书
企业党员公开承诺书
2014/03/26 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript