var chart = Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: '东京月平均天气数据'
},
subtitle: {
text: '数据来源: WorldClimate.com'
},
xAxis: [{
categories: [
'一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'
],
crosshair: true,
offset: 40
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: '温度',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: '降雨量',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: '海平面气压',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}, {
title: {
text: '污染物浓度 (mm)'
}
}],
tooltip: {
shared: true
},
series: [{
name: '降雨量',
type: 'spline',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: '海平面气压',
type: 'spline',
yAxis: 2,
data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' mb'
}
}, {
name: '温度',
type: 'spline',
Axis: 3,
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: ' °C'
}
},{
name: '东京',
Axis: 4,
type: 'column',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: '纽约',
Axis: 4,
type: 'column',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: '伦敦',
Axis: 4,
type: 'column',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: '柏林',
Axis: 4,
type: 'column',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}, {
name: 'aa',
Axis: 4,
type: 'column',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
},{
name: 'bb',
Axis: 4,
type: 'column',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
},{
name: 'cc',
Axis: 4,
type: 'column',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
},{
type: 'windbarb',
data: [
[9.8, 177.9],
[10.1, 177.2],
[11.3, 179.7],
[10.9, 175.5],
[9.3, 159.9],
[8.8, 159.6],
[7.8, 162.6],
[5.6, 186.2],
[6.8, 146.0],
[6.4, 139.9],
[3.1, 180.2],
[4.3, 177.6]
],
name: 'Wind',
color: Highcharts.getOptions().colors[1],
showInLegend: true,
tooltip: {
valueSuffix: ' m/s'
}
}]
});

引入js

highcharts.js
exporting.js
windbarb.js
highcharts-zh_CN.js

highcharts中放aqi及6要素,再加上气象5要素的图的更多相关文章

  1. # 【Python3练习题 003】一个整数,它加上100后是一个完全平方数,再加上168又是一个完全平方数,请问该数是多少?

    # -------------------------------------------------## 所谓的“完全平方数”,就是开完根号仍然是整数.## 数学渣是这么思考的:假设这个数 i 在1 ...

  2. 当微信小程序遇到云开发,再加上一个类似 ColorUI 的模板,人人都能做小程序了

    作为一个 Java 程序员,早就想尝试一把微信小程序,但是一直苦于没有想法,再加上做一个漂亮的页面实在不太擅长. 由于自己比较喜欢历史,经常看历史方面的书.在一次梳理中国现有的朝代时,突然想到,要是可 ...

  3. java例题_13 加上100再加上168的完全平方数问题

    1 /*13 [程序 13 根据条件求数字] 2 题目:一个整数,它加上 100 后是一个完全平方数,再加上 268 又是一个完全平方数,请问该数是多少? 3 程序分析:在 10万以内判断,先将该数加 ...

  4. python基础练习题(一个整数,它加上100后是一个完全平方数,再加上168又是一个完全平方数,请问该数是多少?)

    day2 --------------------------------------------------------------- 实例003:完全平方数 题目: 一个整数,它加上100后是一个 ...

  5. 6-Qt给父widget加上styleSheet(添加背景图)而不改变子widget的styleSheet的方法

    Qt给父widget加上styleSheet(添加背景图)而不改变子widget的styleSheet的方法 比如用stylesheet给widget加背景图,可以用qt designer修改ui文件 ...

  6. Engine中如何实现先居中显示要素再闪烁

    [解决办法]:需要在要素居中显示之后.闪烁之前执行IScreenDisplay.UpdateWindow强制全刷,如: //居中显示要素 IActiveView actView = axMapCont ...

  7. [改变自己wordpress.2]至wordpress再加上简单的debug sql调试.

    或者说,同事. 需要帮助她打印出来sql 调试输出到页面sql 在这里,我们使用插件或一个的方式来启动配置文件wordpress的debug 在插件文件夹 wordpress/wp-content/p ...

  8. java中“==”和equals方法的区别,再加上特殊的String引用类型

    ==和equals的区别: 1.==是运算符,而equals是基类Object定义的一个方法,并且equals使用==定义的 2.进行比较时,分为  基本数据类型  的比较和  引用数据类型 的比较 ...

  9. 多播委托和匿名方法再加上Lambda表达式

    多播委托就是好几个方法全都委托给一个委托变量 代码: namespace 委托 { class Program { static void math1() { Console.WriteLine(&q ...

随机推荐

  1. arm页表在linux中的融合

    参考:arm-linux内存页表创建 arm的第一级页表条目数为4096个,对于4K页第二级目录条目个数为256个,一级二级条目都是每个条目4字节. 在linux下二级分页如下:虚拟地址——> ...

  2. micrium ucprobe使用笔记

    前段时间在学习ucos-iii的时候,用到了micrium ucprobe,发现在调试的时候,很方便,可以直观的看到任务的运行使用情况,全局变量的值变化等,当然详细的可以参考官方文档,也可以参考网上的 ...

  3. go语言结构体作为函数参数,采用的是值传递

    经过验证,go语言结构体作为函数参数,采用的是值传递.所以对于大型结构体传参,考虑到值传递的性能损耗,最好能采用指针传递. 验证代码: package main import ( "fmt& ...

  4. Python中的属性访问与描述符

    Python中的属性访问与描述符 请给作者点赞--> 原文链接 在Python中,对于一个对象的属性访问,我们一般采用的是点(.)属性运算符进行操作.例如,有一个类实例对象foo,它有一个nam ...

  5. ubuntu12.04安装teamviewer

    ubuntu 12.04 64位 下载地址:http://downloadap2.teamviewer.com/download/teamviewer_linux_x64.deb 下载之后,选中,右击 ...

  6. mac配置启动mongodb

    1.新建文件夹,用于存放数据库文件.建议放在自己用户名的文件夹下,不需要sudo会方便很多. 在Users的自己用户名环境下: mkdir [文件夹名] 2.转到mongodb的Bin目录,执行mon ...

  7. day19-IO多路复用

    1.I/O多路复用指:通过一种机制,可监听多个描述符(soket对象)(文件句柄),一旦某个描述符发送编号(一般指读就绪或写就绪),能够通知程序进行相应的读写操作. 2.I/O多路复用方式:selec ...

  8. 理解Linux虚拟文件系统VFS

    当前,除了linux标准的文件系统Ext2/Ext3/Ext4外,还有很多种文件系统,比如reiserfs, xfs, Windows的vfat NTFS,网络文件系统nfs 以及flash 文件系统 ...

  9. gdb调试手册 一 gdb概述

    一 gdb概述 gdb调试器的目的是让你了解其他的程序在执行的时候发生了什么或者其他程序崩溃时正在做什么 gdb主要能够在运行中做四类事情(包括这些事情中的一些附加的事情)来帮助你获取bugs a 运 ...

  10. javascript学习笔记-数据类型

    一 数据类型 基本类型:undefined,null,boolean,number,string     保存在栈内存中     占用空间固定        变量直接从栈内存中存取的是该值 引用类型: ...