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 相关文章推荐
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
javascript不可用的问题探究
Oct 01 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
Javascript动画效果(2)
Oct 11 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 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
php短域名转换为实际域名函数
2011/01/17 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
Pytorch在NLP中的简单应用详解
2020/01/08 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
远程调用的原理
2014/07/05 面试题
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
创先争优公开承诺书
2014/08/30 职场文书
资产运营委托书范本
2014/10/16 职场文书
五年级上册复习计划
2015/01/19 职场文书
追讨欠款律师函
2015/06/24 职场文书
2016继续教育研修日志
2015/11/13 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python