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代码
Dec 09 Javascript
javascript之AJAX框架使用说明
Apr 24 Javascript
理解Javascript_09_Function与Object
Oct 16 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
如何利用node转发请求详解
Sep 17 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仿QQ验证码的实例分析
2013/07/01 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
Python中asyncore的用法实例
2014/09/29 Python
Python的Urllib库的基本使用教程
2015/04/30 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
keras中的backend.clip用法
2020/05/22 Python
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
浙江文明网签名寄语
2014/01/18 职场文书
特色蛋糕店创业计划书
2014/01/28 职场文书
作弊检讨书1000字
2014/02/01 职场文书
运动会开幕式解说词
2014/02/05 职场文书
中学教师教育感言
2014/02/21 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
总结python多进程multiprocessing的相关知识
2021/06/29 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python