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(){
     $('#doubleColumnLineChart').highcharts({
       chart: {
         zoomType: 'xy'
       },
       title: {
         text: '(3water.com)某城市的月平均温度和降雨量'
       },
       xAxis: [{
         categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']
       }],
       yAxis: [{ // 主Y轴
         labels: {
           format: '{value}°C',
           style: {
             color: '#89A54E',
             fontSize: '12px'
           }
         },
         title: {
           text: '温度',
           style: {
             color: '#89A54E',
             fontSize: '12px'
           }
         }
       }, { // 次Y轴
         title: {
           text: '降雨量',
           style: {
             color: '#4572A7'
           }
         },
         labels: {
           format: '{value} mm',
           style: {
             color: '#4572A7'
           }
         },
         opposite: true
       }],
       tooltip: {
         shared: true
       },
       legend: {
         layout: 'vertical',
         align: 'left',
         x: 120,
         verticalAlign: 'top',
         y: 100,
         floating: true,
         backgroundColor: '#FFFFFF'
       },
       series: [{
         name: '降雨量',
         color: '#4572A7',
         type: 'column',
         yAxis: 1,
         data: [9.9, 51.5, 16.4, 129.2, 44.0, 76.0, 35.6, 148.5, 116.4, 104.1, 95.6, 154.4],
         tooltip: {
           valueSuffix: ' mm'
         }
       }, {
         name: '温度',
         color: '#89A54E',
         type: 'spline',
         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 35.2, 26.5, 13.3, 18.3, 13.9, 2.6],
         tooltip: {
           valueSuffix: '°C'
         }
       }]
     });
   });
</script>
</head>
<body>
  <div id="doubleColumnLineChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、运行效果图:

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

Javascript 相关文章推荐
js opener的使用详解
Jan 11 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
详解Vue中watch的高级用法
May 02 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 #Javascript
vue如何实现observer和watcher源码解析
Mar 09 #Javascript
详解VueJs异步动态加载块
Mar 09 #Javascript
微信小程序 设置启动页面的两种方法
Mar 09 #Javascript
js实现登录框鼠标拖拽效果
Mar 09 #Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 #Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 #Javascript
You might like
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
Javascript中的变量使用说明
2010/05/18 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
深入理解python中的select模块
2017/04/23 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
python和go语言的区别是什么
2020/07/20 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
英国网上购买门:Direct Doors
2018/06/07 全球购物
database面试题
2013/03/28 面试题
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
《检阅》教学反思
2016/02/22 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
只用Python就可以制作的简单词云
2021/06/07 Python
Python访问Redis的详细操作
2021/06/26 Python
python神经网络ResNet50模型
2022/05/06 Python