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. React原理探索- @providesModule 模块系统

    @providesModule是什么 react抛出组件化的概念后,对于开发者而言,为了提高代码的可读性与结构性,通过文件目录结构去阐述组件嵌套关系无疑是一个很好的办法,但是目录级别的加深,同时让re ...

  2. Android开发——Viewpager的介绍使用

    目录: 一.Viewpager的简单介绍 二.简单的Viewpager使用 三.简单显示图片的Viewpager实现 四.广告图的实现及Viewpager指示器(小圆点)的实现 五.APP引导页的实现 ...

  3. rsync推送和拉取

    rsync格式: # 拷贝本地文件.当SRC和DES路径信息都不包含有单个冒号":"分隔符时就启动这种工作模式.如:rsync -a /data /backup rsync [OP ...

  4. [dsu on tree]【学习笔记】

    十几天前看到zyf2000发过关于这个的题目的Blog, 今天终于去学习了一下 Codeforces原文链接 dsu on tree 简介 我也不清楚dsu是什么的英文缩写... 就像是树上的启发式合 ...

  5. BZOJ 4767: 两双手 [DP 组合数]

    传送门 题意: 给你平面上两个向量,走到指定点,一些点不能经过,求方案数 煞笔提一开始被题面带偏了一直郁闷为什么方案不是无限 现在精简的题意.....不就是$bzoj3782$原题嘛,还不需要$Luc ...

  6. POJ 2154 Color [Polya 数论]

    和上题一样,只考虑旋转等价,只不过颜色和珠子$1e9$ 一样的式子 $\sum\limits_{i=1}^n m^{gcd(i,n)}$ 然后按$gcd$分类,枚举$n$的约数 如果这个也化不出来我莫 ...

  7. js事件机制

    js事件属性:

  8. JavaWeb项目架构之NFS文件服务器

    NFS简介 NFS(Network File System)即网络文件系统. 主要功能:通过网络(局域网)让不同的主机系统之间可以共享文件或目录. 主要用途:NFS网络文件系统一般被用来存储共享视频, ...

  9. 听说你开发.NET还在用VS，小哥哥给你推荐全平台的Rider

    本文地址:http://www.cnblogs.com/likeli/p/8461010.html 前言 .NET平台的开发一直都只能使用Visual Studio来开发,自从dotnet core ...

  10. Java开发API文档资源

    <netty> http://netty.io/4.1/api/index.html < Spring FrameWork > 1   http://spring.io/ 2 ...