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 相关文章推荐
javascript 鼠标拖动图标技术
Feb 07 Javascript
Javascript 入门基础学习
Mar 10 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
基于js实现判断浏览器类型代码实例
Jul 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实现蜘蛛访问日志统计
2013/07/05 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
jquery 简单的进度条实现代码
2010/03/11 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
js实现随机点名小功能
2017/08/17 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
python实现的登录和操作开心网脚本分享
2014/07/09 Python
python实现批量下载新浪博客的方法
2015/06/15 Python
python绘制简单彩虹图
2018/11/19 Python
python三方库之requests的快速上手
2019/03/04 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
python找出因数与质因数的方法
2019/07/25 Python
利用Python实现kNN算法的代码
2019/08/16 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
python中有帮助函数吗
2020/06/19 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
Python中Yield的基本用法
2020/10/18 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
实习教师自我鉴定
2013/12/12 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
小区推广策划方案
2014/06/06 职场文书
理财计划书
2014/08/14 职场文书
寒假生活随笔
2015/08/15 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
数据设计之权限的实现
2022/08/05 MySQL