HighCharts之2D柱状图、折线图的组合双轴图

1、实例源码

DoubleAxis.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D柱状图、折线图的组合双轴图</title>
<script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../scripts/js/highcharts.js"></script>
<script type="text/javascript">
     $(function(){
    	 $('#doubleColumnLineChart').highcharts({
    		 chart: {
                 zoomType: 'xy'
             },
             title: {
                 text: '某城市的月平均温度和降雨量'
             },
             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、实例结果

HighCharts之2D柱状图、折线图的组合双轴图的更多相关文章

  1. HighCharts之2D柱状图、折线图的组合多轴图

    HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...

  2. HighCharts之2D柱状图、折线图和饼图的组合图

    HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...

  3. HighCharts之2D柱状图

    1.HighCharts之2D柱状图源码 column.html: <!DOCTYPE html> <html> <head> <meta charset=& ...

  4. 如何拼接FusionCharts的JSON格式的双轴图

    1.问题背景 假如,项目中遇到这样一个问题:利用FusionCharts中的JSON格式拼接双轴图,并将JSON字符串转换成JSON对象传输到前台,在页面上展示出来. 2.设计源码 /** * * @ ...

  5. pyhton中matplotlib箱线图的绘制（matplotlib双轴图、箱线图、散点图以及相关系数矩阵图)）

    //2019.07.23 1.箱形图,又称为盒式图,一般可以很好地反映出数据分布的特征,也可以进行多项数据之间分布特征的比较,它主要包含五个基础数据:中位数,两个上下分位数以及上下边缘线数据 其中的一 ...

  6. Echarts双轴图的配置.

    在series中的数据组加个属性,yAxisIndex: 1,表示第二个数据用的是第二个y轴,不加这个属性的话都是默认0,即第一个属性,再配置yAxis的值第一个为左侧坐标轴,右册坐标轴为第二个配置参 ...

  7. Flex实现双轴条状图

    1.问题背景 一般的,柱状图可以实现双轴图,但是如何实现双轴条状图? 2.实现实例 <?xml version="1.0" encoding="utf-8" ...

  8. MeteoInfoLab脚本示例：多Y轴图

    数据范围相差比较大的数据序列进行对比的时候多Y轴图就很重要了.MeteoInfoLab中提供了一个twinx函数来根据已有的坐标系(Axes)生成一个新的Axes,这个命令会使得已有的Axes不绘制右 ...

  9. FusionCharts 2D柱状图和折线图的组合图调试错误

    在设计FusionCharts 2D柱状图和折线图的组合图的时候,我发现不管怎么重启服务器,组合图就是不出来.后来,我通过调试发现我犯了一个致命的错误,运用平常一贯的思维,认为3D图有这种类型,那么2 ...

随机推荐

  1. Spring Boot 使用maven打包成jar

    1.application.properties加入如下配置 server.port= 2.修改pom.xml <?xml version="1.0" encoding=&q ...

  2. 【分布式】ZooKeeper学习之一：安装及命令行使用

    ZooKeeper学习之一:安装及命令行使用 一直都想着好好学一学分布式系统,但是这拖延症晚期也是没得治了,所以干脆强迫自己来写一个系列博客,从zk的安装使用.客户端调用.涉及到的分布式原理.选举过程 ...

  3. ABAP系统值

    SY-SUBRC:语句执行后的返回值,0表示成功 SY-DATUM:当前服务器日期 SY-UZEIT:当前服务器时间 SY-ULINE:255长度的水平线 SY-VLINE:垂直线 SY-INDEX: ...

  4. xBIM 使用Linq 来优化查询

    目录 xBIM 应用与学习 (一) xBIM 应用与学习 (二) xBIM 基本的模型操作 xBIM 日志操作 XBIM 3D 墙壁案例 xBIM 格式之间转换 xBIM 使用Linq 来优化查询 x ...

  5. NumPy快速入门笔记

    我正以Python作为突破口,入门机器学习相关知识.出于机器学习实践过程中的需要,我快速了解了一下NumPy这个科学计算库的使用方法.下面记录相关学习笔记. 简介 NumPy是一个科学计算库.结合Py ...

  6. 夏令营讲课内容整理 Day 3.

    本日主要内容是树与图.   1.树 树的性质 树的遍历 树的LCA 树上前缀和   树的基本性质: 对于一棵有n个节点的树,必定有n-1条边.任意两个点之间的路径是唯一确定的.   回到题目上,如果题 ...

  7. POJ2891 Strange Way to Express Integers [中国剩余定理]

    不互质情况的模板题 注意多组数据不要一发现不合法就退出 #include <iostream> #include <cstdio> #include <cstring&g ...

  8. vue2.0使用slot插槽分发内容

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. Python tutorial阅读之Python基本运算与基本变量

    将 Python 当做计算器 除法运算 用/表示除法运算时,一般得到的是浮点数,如果我们需要得到整数,可以用运算符// 余数计算 % 幂乘方 系统内置变量_ 内置变量_,存储了最近的结果.如图 字符串 ...

  10. Redis集群分布

    Redis系列 作者Mr.Chen,转载请注明博客出处:http://www.cnblogs.com/cjh-notes/ Redis集群存储 先看下架构图,下面说明其存储原理:首先redis每个节点 ...