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变换显示图片的实例
Apr 16 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 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
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
utf8的编码算法 转载
2006/12/27 Javascript
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
Python编程实现蚁群算法详解
2017/11/13 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
python实现井字棋小游戏
2020/03/04 Python
Python request使用方法及问题总结
2020/04/26 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
财务人员个人自荐信范文
2013/09/26 职场文书
银行内勤岗位职责
2014/04/09 职场文书
园林技术专业求职信
2014/07/28 职场文书
争做文明公民倡议书
2014/08/29 职场文书
使用python求解迷宫问题的三种实现方法
2022/03/17 Python