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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
编写一个javascript元循环求值器的方法
Apr 14 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
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
Vue header组件开发详解
2018/01/26 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
python实现BackPropagation算法
2017/12/14 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
python 多线程重启方法
2019/02/18 Python
在django中,关于session的通用设置方法
2019/08/06 Python
对python中return与yield的区别详解
2020/03/12 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
python help函数实例用法
2020/12/06 Python
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
会计出纳员的自我评价
2014/01/15 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle