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源码解析一（框架梳理）

    整体架构 打算开始写这个系列,不为上首页,也不为博取多少关注,只有一个目的:梳理知识,扩充思路:废话不多,开始吧.第一步,大家去spring的官方github下面去下载它的源码,具体的自己谷歌,我已经 ...

  2. ansible基础及使用示例

    1 介绍 Ansible 是一个系统自动化工具,用来做系统配管理,批量对远程主机执行操作指令. 2 实验环境 ip 角色 192.168.40.71 ansible管控端 192.168.40.72 ...

  3. Hadoop学习笔记五

    一.uber(u:ber)模式 MapReduce以Uber模式运行时,所有的map,reduce任务都在一个jvm中运行,对于小的mapreduce任务,uber模式的运行将更为高效. uber模式 ...

  4. POJ Building roads [二分答案 2SAT]

    睡觉啦 #include <iostream> #include <cstdio> #include <cstring> #include <algorith ...

  5. AJAX入门第一篇就够了

    什么是Ajax Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML Ajax实际上是下面这几种技术的融合: (1)XHTML和CSS的基于标准 ...

  6. DaemonSet 典型应用场景 - 每天5分钟玩转 Docker 容器技术（129）

    Deployment 部署的副本 Pod 会分布在各个 Node 上,每个 Node 都可能运行好几个副本.DaemonSet 的不同之处在于:每个 Node 上最多只能运行一个副本. DaemonS ...

  7. DirectSound---简易Wav播放器

    这篇文章主要给大家介绍下如何用DirectSound打造一个简易播放器,因为篇幅有限且代码逻辑较为复杂,我们只介绍下核心技术内容.该播放器主要包括以下功能: 播放.暂停 播放进度提示. 1. Dire ...

  8. 从一个实例学习----FLASK-WTF

    本案例通过实现一个注册页面的编写,来带你了解FLASK-WTF的运用. 主要功能为表单基础的功能--手机号码必须为11位数,且通过数据库查找不能有已经注册的了,密码要求输入两遍且必须一样,且所有内容不 ...

  9. yii2 源码分析Behavior类分析 （四）

    Behavior类是所有事件类的基类,它继承自object类 Behavior类的前面注释描述大概意思: * Behavior类是所有事件类的基类 * * 一个行为可以用来增强现有组件的功能,而不需要 ...

  10. webpack的世界

    本文也是多次学习webapck积累下来的知识点,一直在云笔记里. webpack的原理 webpack构建流程 从启动webpack构建到输出结果经历了一系列过程,它们是: 解析webpack配置参数 ...