highcharts多坐标轴混合图

最新推荐文章于 2023-12-06 13:42:47 发布

彳卸风

最新推荐文章于 2023-12-06 13:42:47 发布

阅读量667

点赞数

分类专栏： js_charts 文章标签： highcharts 多坐标轴混合图

本文链接：https://blog.csdn.net/ci2011ss/article/details/103270322

版权

js_charts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

//---------------------------在线damo01-----------------------------------
var chart = Highcharts.chart('container', {
	chart: {
		//zoomType: 'xy' //缩放控制
	},
	title: {
		text: '东京月平均天气数据'
	},
	subtitle: {
		text: ''
	},
	xAxis: [{
		categories: [
			'一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'
		],
		crosshair: true
	}],
	yAxis: [{
		reversed: true,//反转
		max:'2500',min:'0',
		labels: {format: '{value}°1',style: {color: Highcharts.getOptions().colors[2]}},
		title: {text: '',style: {color: Highcharts.getOptions().colors[2]}},
		opposite: true
	}, { // Secondary yAxis
		reversed: true,//反转
		max:'2500',min:'0',
		labels: {
			enabled:true,format: '{value}°2',style: {color: Highcharts.getOptions().colors[3]}},
		title: {text: '',style: {color: Highcharts.getOptions().colors[3]}},
		opposite: true
	}, { // Secondary yAxis
		max:'2500',min:'0',
		reversed: true,//反转
		gridLineWidth: 0,title: {text: '',style: {color: Highcharts.getOptions().colors[0]}},
		labels: {format: '{value} °3',style: {color: Highcharts.getOptions().colors[0]}}
	}, { 
		max:'2500',min:'0',
		gridLineWidth: 0,title: {text: '',style: {color: Highcharts.getOptions().colors[4]}},
		labels: {enabled:true,format: '{value} °4',style: {color: Highcharts.getOptions().colors[4]}},
		opposite: true
	}, {
		max:'2500',min:'0',	
		gridLineWidth: 0,title: {text: '',style: {color: Highcharts.getOptions().colors[1]}},
		labels: {enabled:true,format: '{value} °5',style: {color: Highcharts.getOptions().colors[1]}},
		opposite: true
	}, {
		max:'2500',min:'0',	
		gridLineWidth: 0,title: {text: '',style: {color: Highcharts.getOptions().colors[1]}},
		labels: {enabled:true,format: '{value} °6',style: {color: Highcharts.getOptions().colors[1]}},
		opposite: true
	}],
	tooltip: {
		shared: true
	},
	legend: {
		layout: 'vertical',
		align: 'right',
		x: 0,
		verticalAlign: 'top',
		y: 155,
		//floating: true,
		backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
	}, 
	series: [{
		name: '海平面气压1',
		type: 'column',
		yAxis: 2,
		data: [916, 815.9, 1015.5, 712.3, 1009.5, 1009.6, 910.2, 1013.1, 816.9, 1018.2, 916.7,1019],
		marker: {
			enabled: false
		},
		dashStyle: 'shortdot',
		tooltip: {
			valueSuffix: ' mb'
		}
	}, {
		name: '海平面气压2',
		type: 'column',
		yAxis: 3,
		data: [916, 815.9, 1015.5, 712.3, 1009.5, 1009.6, 910.2, 1013.1, 816.9, 1018.2, 916.7,1019],
		marker: {
			enabled: false
		},
		dashStyle: 'shortdot',
		tooltip: {
			valueSuffix: ' mb'
		}
	}, {
		name: '海平面气压3',
		type: 'spline',
		yAxis: 3,
		data: [716, 916, 1315.9, 1015.5, 812.3, 409.5, 809.6, 810.2, 1013.1, 1416.9, 1018.2,816.7],
		marker: {
			enabled: false
		},
		dashStyle: 'shortdot',
		tooltip: {
			valueSuffix: ' mb'
		}
	}, {
		name: '海平面气压4',
		type: 'column',
		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: '海平面气压5',
		type: 'column',
		yAxis: 3,
		data: [916, 815.9, 1015.5, 712.3, 1009.5, 1009.6, 910.2, 1013.1, 816.9, 1018.2, 916.7,1019],
		marker: {
			enabled: false
		},
		dashStyle: 'shortdot',
		tooltip: {
			valueSuffix: ' mb'
		}
	}, {
		name: '海平面气压6',
		type: 'spline',
		yAxis: 3,
		data: [996, 315.9, 615.5, 912.3, 1009.5, 409.6, 510.2, 1013.1, 816.9, 718.2, 816.7,819],
		marker: {
			enabled: false
		},
		dashStyle: 'shortdot',
		tooltip: {
			valueSuffix: ' mb'
		}
	}]
});

显示效果：

//根据删除坐标所示可以将坐标轴与数据列进行动态关联，继而进行demo01改造
$(function () {
	var chart = Highcharts.chart('container', {
		xAxis: {
			categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
		},
		yAxis: {
			title: {
				text: 'Temperature'
			},
			lineWidth: 2,
			lineColor: '#F33',
			id: 'temperature-axis'
		},
		series: [{
			name: 'Temperature',
			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],
			color: '#F33'
		}]
	});
	// the button handlera
	$('#add').click(function () {
		chart.addAxis({ // Secondary yAxis
			id: 'rainfall-axiss',
			title: {
				text: 'Rainfall'
			},
			lineWidth: 2,
			lineColor: '#08F',
			reversed: true,//反转
			opposite: true
		});
		chart.addSeries({
			name: 'Rainfall',
			type: 'column',
			color: '#08F',
			yAxis: 'rainfall-axiss',
			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]
		});
		chart.addSeries({
			name: 'Rainfall',
			type: 'column',
			color: '#08F',
			yAxis: 'rainfall-axiss',
			data: [71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,49.9]
		});
		$(this).attr('disabled', true);
		$('#remove').attr('disabled', false);
	});
	$('#remove').click(function () {
		chart.get('rainfall-axiss').remove();  // =  chart.yAxis[0].remove();
		$(this).attr('disabled', true);
		$('#add').attr('disabled', false);
	});
});

显示效果：

最终理想目标是隐藏其中重复坐标轴，显示6个数据项，图例为一正序，一反向，后来发现自己Ctrl+C、Ctrl+V 没有理解全api

// Highcharts 使用yAxis: 1, 可以直接绑定坐标轴。汗！！！！！！！
var chart = Highcharts.chart('container', {
	chart: {
		zoomType: 'xy'
	},
	title: {
		text: '东京月平均温度和降雨量'
	},
	subtitle: {
		text: '数据来源: WorldClimate.com'
	},
	xAxis: [{
		categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
					 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
		crosshair: true
	}],
	yAxis: [{ // Primary yAxis
		max:'60',
		labels: {
			format: '{value}°C',
			style: {
				color: Highcharts.getOptions().colors[1]
			}
		},
		title: {
			text: '温度',
			style: {
				color: Highcharts.getOptions().colors[1]
			}
		}
	}, { // Secondary yAxis
		max:'500',
		title: {
			text: '降雨量',
			style: {
				color: Highcharts.getOptions().colors[0]
			}
		},
		reversed: true,//反转
		labels: {
			format: '{value} mm',
			style: {
				color: Highcharts.getOptions().colors[0]
			}
		},
		opposite: true
	}],
	tooltip: {
		shared: true
	},
	legend: {
		layout: 'vertical',
		align: 'right',
		x: 0,
		verticalAlign: 'top',
		y: 100,
		//floating: true,
		backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
	},
	series: [{
		name: '降雨量1',
		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: '降雨量2',
		type: 'column',
		yAxis: 1,
		data: [71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,49.9],
		tooltip: {
			valueSuffix: ' mm'
		}
	}, {
		name: '降雨量3',
		type: 'spline',
		yAxis: 1,
		data: [106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,49.9,71.5],
		tooltip: {
			valueSuffix: '°C'
		}
	}, {
		name: '温度1',
		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'
		}
	}, {
		name: '温度2',
		type: 'column',
		data: [6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6,7.0],
		tooltip: {
			valueSuffix: '°C'
		}
	}, {
		name: '温度3',
		type: 'column',
		data: [ 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6,7.0,6.9],
		tooltip: {
			valueSuffix: '°C'
		}
	}]
});