多坐标轴混合图 | JShare

var chart = Highcharts.chart('container', {
		chart: {
				zoomType: 'xy'
		},
		title: {
				text: '东京月平均天气数据'
		},
		subtitle: {
				text: '数据来源: WorldClimate.com'
		},
		xAxis: [{
				categories: [
						'一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'
				],
				crosshair: true
		}],
		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]
						}
				}
		}, { // Tertiary yAxis
				gridLineWidth: 0,
				title: {
						text: '海平面气压',
						style: {
								color: Highcharts.getOptions().colors[1]
						}
				},
				labels: {
						format: '{value} mb',
						style: {
								color: Highcharts.getOptions().colors[1]
						}
				},
				opposite: true
		}],
		tooltip: {
				shared: true
		},
		legend: {
				layout: 'vertical',
				align: 'left',
				x: 80,
				verticalAlign: 'top',
				y: 55,
				floating: true,
				backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
		},
		series: [{
				name: '降雨量',
				type: 'column',
				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',
				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'
				}
		}]
});

<div id="container" style="min-width:400px;height:400px"></div>

{"doctype":0,"resouces":"3,7,https://code.hcharts.cn/plugins/zh_cn.js","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":7}}","meta":"<link rel=\"icon\" href=\"https://jscdn.com.cn/highcharts/images/favicon.ico\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"}

多坐标轴混合图 | JShare

模板（查看所有模板）