今天来分享上图多坐标轴+标签的复杂图表实战案例代码：
完整可运行 HTML 代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts 多坐标轴混合图表 - 东京月度气象数据</title>
<!-- 引入 Highcharts -->
<script src="https://cdn.jsdelivr.net/npm/highcharts@10.3.3/highcharts.js"></script>
<style>
#container {
width: 100%;
height: 85vh;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
Highcharts.chart('container', {
chart: {
// 支持XY双轴缩放
zooming: {
type: 'xy'
}
},
// 主标题
title: {
text: '东京月度气象数据统计'
},
// 副标题
subtitle: {
text: '数据源：WorldClimate.com'
},
// X轴（月份）
xAxis: [{
categories: [
'1月', '2月', '3月', '4月', '5月', '6月',
'7月', '8月', '9月', '10月', '11月', '12月'
],
crosshair: true // 十字准星
}],
// ================== 多Y轴核心配置 ==================
yAxis: [
{ // 第1个Y轴：温度（右侧）
labels: {
format: '{value}°C',
style: { color: Highcharts.getOptions().colors[2] }
},
title: {
text: '温度',
style: { color: Highcharts.getOptions().colors[2] }
},
opposite: true // 显示在右侧
},
{ // 第2个Y轴：降雨量（左侧）
gridLineWidth: 0,
title: {
text: '降雨量',
style: { color: Highcharts.getOptions().colors[0] }
},
labels: {
format: '{value} mm',
style: { color: Highcharts.getOptions().colors[0] }
}
},
{ // 第3个Y轴：海平面气压（右侧）
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,
xDateFormat: '%Y-%m-%d'
},
// 图例
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor: 'rgba(255,255,255,0.25)'
},
// 数据系列（混合图表）
series: [
{
name: '降雨量',
type: 'column', // 柱状图
yAxis: 1, // 绑定第2个Y轴
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, // 绑定第3个Y轴
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' }
}
],
// 响应式适配手机
responsive: {
rules: [{
condition: { maxWidth: 500 },
chartOptions: {
legend: { floating: false, layout: 'horizontal', align: 'center', verticalAlign: 'bottom' },
yAxis: [{
labels: { align: 'right' }, showLastLabel: false
}, {
labels: { align: 'left' }, showLastLabel: false
}, {
visible: false
}]
}
}]
}
});
</script>
</body>
</html>
示例解析
1. 使用Highcharts的图表类型
这是 多 Y 轴混合图表，包含三种系列类型：
- 降雨量：柱状图（column）
- 温度：平滑折线图（spline）
- 气压：虚线折线图（spline + shortdot）
2. 多轴核心逻辑
- Y 轴数量：3 个
- 左侧 Y 轴：降雨量（mm）
- 右侧双 Y 轴：温度（℃）+ 气压（mb）
- 每个系列通过
yAxis: 序号绑定对应坐标轴
3. 关键功能解析
- 多维度同图展示 不用拆分多个图表，一图展示 降雨量、温度、气压 三类不同单位、不同量级的数据。
- 单位自动区分 温度：℃、雨量：mm、气压：mb，互不干扰。
- 共享提示框 鼠标悬浮时，同时展示同一月份的所有数据，便于综合分析。
- XY 缩放 支持框选缩放，适合精细化数据分析。
- 响应式适配 手机端自动调整布局，小屏隐藏多余坐标轴。
行业应用案例
1. 气象环境监测
- 温度、湿度、气压、风速、降雨量 多指标同图展示
- 环境监测大屏、气象站后台必备
2. 工业物联网 / 设备监控
- 电压、电流、功率、温度、压力 多维度实时监控
- 工厂设备状态可视化
3. 金融数据分析
- 股价、成交量、换手率、市盈率 多指标对比
- 股票 / 基金 / 大盘分析
4. 电商 / 运营数据分析
- 销售额、订单量、访客数、转化率 同图展示
- 月度 / 季度经营报表
5. 医疗 / 健康数据
- 心率、血压、血氧、体温 多指标监测
- 健康监测仪表盘
核心亮点总结
✅ 支持 N 个 Y 轴，不限数量 ✅ 柱状 / 折线 / 面积等类型自由混合 ✅ 不同单位、不同量级数据完美共存 ✅ 共享提示框，数据对比一目了然 ✅ 支持缩放、响应式、大屏展示 ✅ 企业级可视化标准方案
在本多维度气象数据可视化案例中，充分体现了 Highcharts 强大的多维数据渲染能力。传统可视化方案往往只能适配单一维度、单一数值区间的数据展示，多指标分析需要拆分多张图表，存在对比割裂、页面冗余的问题。
而 Highcharts 支持自定义多坐标轴体系，可实现左右双侧多 Y 轴自由排布，各坐标轴独立配置刻度、单位、配色与样式，完美兼容温度、降水、气压等差异化量级的业务指标。同时平台支持柱状图、折线图、虚线曲线图混合渲染，针对不同数据特征匹配最优展示形式。
搭配原生 XY 轴缩放、十字准星联动、多系列共享悬浮提示等交互能力，实现同一时间维度下多数据的联动分析。结合智能响应式规则，可自动适配电脑、移动端等不同终端布局，兼顾可视化专业性、交互体验与项目实用性，是企业级多维数据可视化的最优前端解决方案。
