jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】


Posted in Javascript onMarch 09, 2017

本文实例讲述了jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果。分享给大家供大家参考,具体如下:

1、实例代码:

<!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(){
     $('#someColumnLineChart').highcharts({
       chart: {
         zoomType: 'xy'
       },
       title: {
         text: '(3water.com)某城市有关气候参数'
       },
       xAxis: [{
         categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']
       }],
       yAxis: [{ // 主Y轴
         labels: {
           formatter: function() {
             return this.value +'°C';
           },
           style: {
             color: '#89A54E'
           }
         },
         title: {
           text: '温度',
           style: {
             color: '#89A54E'
           }
         },
         opposite: true
       }, { // 次Y轴
         gridLineWidth: 0,
         title: {
           text: '降雨量',
           style: {
             color: '#4572A7'
           }
         },
         labels: {
           formatter: function() {
             return this.value +' mm';
           },
           style: {
             color: '#4572A7'
           }
         }
       }, { // 第三级Y轴
         gridLineWidth: 0,
         title: {
           text: '气压',
           style: {
             color: '#AA4643'
           }
         },
         labels: {
           formatter: function() {
             return this.value +' mb';
           },
           style: {
             color: '#AA4643'
           }
         },
         opposite: true
       }],
       tooltip: {
         shared: true
       },
       legend: {
         layout: 'vertical',
         align: 'left',
         x: 120,
         verticalAlign: 'top',
         y: 80,
         floating: true,
         backgroundColor: '#FFFFFF'
       },
       series: [{
         name: '降雨量',
         color: '#4572A7',
         type: 'column',
         yAxis: 1,
         data: [50.9, 71.5, 96.4, 129.2, 144.0, 106.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.8],
         tooltip: {
           valueSuffix: ' mm'
         }
       }, {
         name: '气压',
         type: 'spline',
         color: '#AA4643',
         yAxis: 2,
         data: [1015, 1012, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1015.1, 1016.9, 1008.2, 1026.7],
         marker: {
           enabled: false
         },
         dashStyle: 'shortdot',
         tooltip: {
           valueSuffix: ' mb'
         }
       }, {
         name: '温度',
         color: '#89A54E',
         type: 'spline',
         data: [3.0, 6.8, 11.5, 16.5, 18.2, 22.5, 28.2, 36.5, 23.3, 18.3, 13.9, 2.6],
         tooltip: {
           valueSuffix: ' °C'
         }
       }]
     });
   });
</script>
</head>
<body>
  <div id="someColumnLineChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、运行效果图:

jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】

Javascript 相关文章推荐
js 操作select相关方法函数
Dec 06 Javascript
jquery插件制作简单示例说明
Feb 03 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
node.js +mongdb实现登录功能
Jun 18 Javascript
Vue监听数据对象变化源码
Mar 09 #Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 #Javascript
Node.js常用工具之util模块
Mar 09 #Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 #Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 #Javascript
js实现简单的二级联动效果
Mar 09 #Javascript
jquery表单提交带错误信息提示效果
Mar 09 #Javascript
You might like
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
php生成圆角图片的方法
2015/04/07 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
Jquery 扩展方法
2010/05/06 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
第一篇初识bootstrap
2016/06/21 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
python局部赋值的规则
2013/03/07 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
python爬取招聘要求等信息实例
2020/11/20 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
大专生自荐信
2013/10/04 职场文书
节电标语大全
2014/06/23 职场文书
车贷收入证明范本
2014/09/14 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书