如何为Highcharts图表配置多轴并将坐标轴显示在左侧？

核心配置要点 #

• 定义多左侧坐标轴：在yAxis配置数组中，为每个坐标轴设置opposite: false（确保显示在左侧），同时分配唯一id用于系列绑定，可通过offset调整轴之间的间距避免重叠。
• 绑定系列到对应轴：每个数据系列通过yAxis属性指定对应坐标轴的id或索引。

完整代码示例 #

Highcharts.chart('container', {
    title: {
        text: '多左侧坐标轴示例'
    },
    yAxis: [
        {
            id: 'tempAxis',
            title: {
                text: '温度 (°C)'
            },
            opposite: false,
            lineWidth: 2,
            lineColor: '#2f7ed8'
        },
        {
            id: 'humidityAxis',
            title: {
                text: '湿度 (%)'
            },
            opposite: false,
            offset: 40,
            lineWidth: 2,
            lineColor: '#0d233a'
        },
        {
            id: 'pressureAxis',
            title: {
                text: '气压 (hPa)'
            },
            opposite: false,
            offset: 80,
            lineWidth: 2,
            lineColor: '#8bbc21'
        }
    ],
    series: [
        {
            name: '温度',
            data: [12, 15, 18, 14, 16, 13],
            yAxis: 'tempAxis',
            color: '#2f7ed8'
        },
        {
            name: '湿度',
            data: [65, 70, 60, 75, 68, 62],
            yAxis: 'humidityAxis',
            color: '#0d233a'
        },
        {
            name: '气压',
            data: [1013, 1012, 1015, 1014, 1016, 1011],
            yAxis: 'pressureAxis',
            color: '#8bbc21'
        }
    ]
});

关键说明 #

• 若之前代码中设置了yAxis.opposite: true，将其改为false即可让轴显示在左侧。
• 通过offset属性可以控制多个轴之间的横向距离，避免标题和刻度重叠。
• 每个坐标轴的样式（颜色、宽度等）可独立配置，让不同轴区分度更高。

内容的提问来源于stack exchange，提问作者DhanaLaxshmi