文章定位目标读者Highcharts 初学者、前端开发者、数据分析人员。学习目标理解为什么需要多个 Y 轴掌握 Highcharts 折线图基础配置学会配置两个 Y 轴理解yAxis与series.yAxis的绑定关系避免双轴图最常见的误读问题。重点内容多 Y 轴的使用场景单轴图与双轴图的差异yAxis数组配置series.yAxis绑定左右轴布局单位、颜色和 Tooltip 的基本设计。发表于2026年9月在数据可视化中我们经常需要同时观察多个指标。例如销售额单位是万元订单量单位是件转化率单位是百分比客单价单位是元。这些指标通常共享相同的时间维度因此很适合放在一张趋势图中。但它们的单位和数量级不同如果全部使用同一个 Y 轴较小的指标可能会被压缩无法清晰展示。这正是多 Y 轴折线图的应用场景。一、先从单 Y 轴折线图开始Highcharts 的基础折线图结构非常简单Highcharts.chart(container,{title:{text:月度销售额趋势},xAxis:{categories:[一月,二月,三月,四月,五月,六月]},yAxis:{title:{text:销售额万元}},series:[{name:销售额,data:[120,135,128,160,175,190]}]});其中xAxis.categories定义横轴分类yAxis定义纵轴series定义折线数据series.name会显示在图例和 Tooltip 中。二、为什么销售额和订单量不适合共用一个 Y 轴假设我们同时展示销售额120、135、160、190 订单量32、40、51、66虽然它们都可以绘制在同一个坐标系中但两者单位不同销售额的单位是万元订单量的单位是件。如果指标数量级差异更大例如销售额为数万而订单量只有几十那么订单量折线会贴近 X 轴用户无法判断其变化趋势。因此我们可以为不同指标配置独立的 Y 轴。三、配置两个 Y 轴在 Highcharts 中单个 Y 轴可以写成对象yAxis:{title:{text:销售额}}多个 Y 轴则需要写成数组yAxis:[{title:{text:销售额万元}},{title:{text:订单量件},opposite:true}]这里第一个 Y 轴索引为0第二个 Y 轴索引为1opposite: true将第二个 Y 轴放置在右侧。四、通过series.yAxis绑定坐标轴每个系列都可以通过series.yAxis指定所使用的 Y 轴Highcharts.chart(container,{title:{text:销售额与订单量},xAxis:{categories:[一月,二月,三月,四月,五月,六月]},yAxis:[{title:{text:销售额万元}},{title:{text:订单量件},opposite:true}],series:[{name:销售额,data:[120,135,128,160,175,190],yAxis:0},{name:订单量,data:[32,40,38,51,58,66],yAxis:1}]});绑定关系如下系列使用的 Y 轴销售额yAxis: 0订单量yAxis: 1如果没有指定series.yAxis默认使用第一个 Y 轴。五、让颜色帮助用户建立对应关系多轴图中颜色是一种重要的辅助编码方式。可以让销售额折线使用蓝色左侧 Y 轴使用蓝色订单量折线使用橙色右侧 Y 轴使用橙色。Highcharts.chart(container,{title:{text:销售额与订单量},xAxis:{categories:[一月,二月,三月,四月,五月,六月]},yAxis:[{title:{text:销售额万元,style:{color:#2f7ed8}},labels:{style:{color:#2f7ed8},format:{value} 万元},lineColor:#2f7ed8,lineWidth:2},{title:{text:订单量件,style:{color:#ed7d31}},labels:{style:{color:#ed7d31},format:{value} 件},lineColor:#ed7d31,lineWidth:2,opposite:true}],series:[{name:销售额,data:[120,135,128,160,175,190],yAxis:0,color:#2f7ed8},{name:订单量,data:[32,40,38,51,58,66],yAxis:1,color:#ed7d31}]});颜色可以帮助用户快速识别系列与轴的关系但不能依赖颜色传达全部信息。坐标轴标题、图例和单位仍然必不可少。六、共享 Tooltip 查看同一时间点的数据如果用户希望在同一时间点同时查看多个指标可以设置tooltip:{shared:true}tooltip:{shared:true,valueDecimals:2}共享 Tooltip 能够回答六月份的销售额是多少订单量是多少对于不同单位的数据建议在 Tooltip 中显示单位避免用户误读。七、什么时候适合使用多 Y 轴多 Y 轴适合以下场景多个指标具有相同的时间或分类维度指标之间需要进行趋势层面的观察指标单位不同但仍然需要紧凑展示每个指标都能清晰标注单位和对应的坐标轴。不建议仅仅为了节省空间把没有关联的指标放在同一张图中。八、总结Highcharts 多 Y 轴的核心配置可以概括为yAxis:[{title:{text:左侧指标}},{title:{text:右侧指标},opposite:true}],series:[{name:指标一,yAxis:0,data:[]},{name:指标二,yAxis:1,data:[]}]真正重要的不是“配置了几个 Y 轴”而是每个轴的单位是否清楚每个系列是否绑定正确图例、颜色和 Tooltip 是否形成一致的认知关系用户能否准确理解数据。下一篇将进一步讨论多 Y 轴图的组合图类型、动态数据、百分比轴、时间轴和工程化配置。于2026年9月总结
