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

1、实例源码

SomeAxis.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(){
    	 $('#someColumnLineChart').highcharts({
    		 chart: {
                 zoomType: 'xy'
             },
             title: {
                 text: '某城市有关气候参数'
             },
             xAxis: [{
                 categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']
             }],
             yAxis: [{ // 主Y轴
                 labels: {
                     formatter: function() {
                         return this.value +'°C';
                     },
                     style: {
                         color: '#89A54E'
                     }
                 },
                 title: {
                     text: '温度',
                     style: {
                         color: '#89A54E'
                     }
                 },
                 opposite: true

             }, { // 次Y轴
                 gridLineWidth: 0,
                 title: {
                     text: '降雨量',
                     style: {
                         color: '#4572A7'
                     }
                 },
                 labels: {
                     formatter: function() {
                         return this.value +' mm';
                     },
                     style: {
                         color: '#4572A7'
                     }
                 }

             }, { // 第三级Y轴
                 gridLineWidth: 0,
                 title: {
                     text: '气压',
                     style: {
                         color: '#AA4643'
                     }
                 },
                 labels: {
                     formatter: function() {
                         return this.value +' mb';
                     },
                     style: {
                         color: '#AA4643'
                     }
                 },
                 opposite: true
             }],
             tooltip: {
                 shared: true
             },
             legend: {
                 layout: 'vertical',
                 align: 'left',
                 x: 120,
                 verticalAlign: 'top',
                 y: 80,
                 floating: true,
                 backgroundColor: '#FFFFFF'
             },
             series: [{
                 name: '降雨量',
                 color: '#4572A7',
                 type: 'column',
                 yAxis: 1,
                 data: [50.9, 71.5, 96.4, 129.2, 144.0, 106.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.8],
                 tooltip: {
                     valueSuffix: ' mm'
                 }

             }, {
                 name: '气压',
                 type: 'spline',
                 color: '#AA4643',
                 yAxis: 2,
                 data: [1015, 1012, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1015.1, 1016.9, 1008.2, 1026.7],
                 marker: {
                     enabled: false
                 },
                 dashStyle: 'shortdot',
                 tooltip: {
                     valueSuffix: ' mb'
                 }

             }, {
                 name: '温度',
                 color: '#89A54E',
                 type: 'spline',
                 data: [3.0, 6.8, 11.5, 16.5, 18.2, 22.5, 28.2, 36.5, 23.3, 18.3, 13.9, 2.6],
                 tooltip: {
                     valueSuffix: ' °C'
                 }
             }]
         });
     });
</script>
</head>
<body>
   <div id="someColumnLineChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、实例结果

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

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

    HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.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. MeteoInfoLab脚本示例：多Y轴图

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

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

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

  6. FusionCharts 2D柱状图和折线图的组合图

    1.设计思路 (1)了解组合图的特性以及用法,选用图的类型: (2)设计出两根柱子和两根折线,分开展示. 2.设计步骤 (1)设计页面 Column2DLine.html: <!DOCTYPE ...

  7. HighCharts之2D带Label的折线图

    HighCharts之2D带Label的折线图 1.HighCharts之2D带Label的折线图源码 LineLabel.html: <!DOCTYPE html> <html&g ...

  8. HighCharts之2D折线图

    HighCharts之2D折线图 1.HighCharts之2D折线图源码 line.html: <!DOCTYPE html> <html> <head> < ...

  9. Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程

    Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程 用excel作图时候经常会碰到做柱状图和折线图组合,这样的图一般难在折线图的数据很小,是百分比趋势图,所以经常相对前面主数据太小了,在 ...

随机推荐

  1. JAVA关键字Volatile的特性

    一.简述: 关键字Volatile是JAVA虚拟机提供的最轻量级的同步机制,但是它并不容易完全被正确.完整的理解,以致于许多程序员在遇到需要处理多线程数据竞争的时候一律使用synchronized来进 ...

  2. 通俗化理解Spring3 IoC的原理和主要组件（spring系列知识二总结）

    ♣什么是IoC? ♣通俗化理解IoC原理 ♣IoC好处 ♣工厂模式 ♣IoC的主要组件 ♣IoC的应用实例 ♣附:实例代码 1.什么是IoC(控制反转)? Spring3框架的核心是实现控制反转(Io ...

  3. ASP.NET Core 2.0 : 三. 项目结构

    本章我们一起来对比着ASP.NET Framework版本看一下ASP.NET Core 2.0的项目结构.(此后的文章也尽量这样对比着, 方便学习理解.) 关注差异, 也为项目迁移做准备. 新建项目 ...

  4. ansible playbook实践(三)-yaml文件写法

    playbook基于YAML语法来编写,基本语法规则如下: 1.大小写敏感 2.使用缩进表示层级关系 3.缩进时不允许使用Tab键,只允许使用空格 4.缩进的空格数目不重要,只要相同层级的元素左侧对齐 ...

  5. HTML图片上下之间的空隙是什么原因

    在这个问题上,<权威指南>该书第三版第 146 页有明确说到: 如果一个垂直元素没有基线——也就是说,这是一个图像或表单输入元素,或者其它替换元素——那么该元素低端与其父元素的基线对齐.这 ...

  6. python基础 列表 的使用

    列表 首先定义一个列表 声明列表 列表名字=[值1,值2] list=[1,2,3,4,5] 这是一个列表,列表中有五个元素(1,2,3,4,5) 显示list列表 print   list 输出   ...

  7. BZOJ 4276: [ONTAK2015]Bajtman i Okrągły Robin [线段树优化建边]

    4276: [ONTAK2015]Bajtman i Okrągły Robin 题意:\(n \le 5000\)个区间\(l,r\le 5000\),每个区间可以选一个点得到val[i]的价值,每 ...

  8. BZOJ 2694: Lcm [莫比乌斯反演 线性筛]

    题意:求\(\sum\limits_{i=1}^n \sum\limits_{j=1}^m lcm(i,j)\ : gcd(i,j) 是sf 无平方因子数\) 无平方因子数?搞一个\(\mu(gcd( ...

  9. BZOJ 1488: [HNOI2009]图的同构 [Polya]

    完全图中选出不同构的简单图有多少个 上题简化版,只有两种颜色....直接copy就行了 太诡异了,刚才电脑上多了一个不动的鼠标指针,然后打开显卡管理界面就没了 #include<iostream ...

  10. Codeforces Round #402 (Div. 2)

    Codeforces Round #402 (Div. 2) A. 日常沙比提 #include<iostream> #include<cstdio> #include< ...