如何为Highcharts图表Y轴两侧设置不同标签（多系列适配）

核心解决思路 #

仅靠opposite: true开启右侧轴会导致两侧标签重复，正确做法是显式定义两个独立的Y轴实例，分别绑定对应系列，再为每个轴配置差异化的标签和样式。

关键配置要点 #

• 左侧Y轴（索引0）：绑定两个面积图系列，配置专属标签、刻度样式
• 右侧Y轴（索引1）：设置opposite: true显示在右侧，绑定折线图系列，配置不同的标签文本、样式
• 动态加载数据时，确保每个系列的yAxis属性始终指向对应轴的索引

修改后的完整代码示例 #

Highcharts.chart('container', {
    chart: {
        type: 'area',
        events: {
            // 模拟动态数据更新
            load: function() {
                const chart = this;
                setInterval(() => {
                    // 更新面积图数据（左Y轴）
                    chart.series[0].addPoint(Math.random() * 100, true, true);
                    chart.series[1].addPoint(Math.random() * 80, true, true);
                    // 更新折线图数据（右Y轴）
                    chart.series[2].addPoint(Math.random() * 10, true, true);
                }, 2000);
            }
        }
    },
    title: {
        text: '动态双Y轴组合图'
    },
    yAxis: [
        // 左侧Y轴：对应面积图
        {
            title: {
                text: '销售额（万元）',
                style: { color: '#2f7ed8' }
            },
            labels: {
                style: { color: '#2f7ed8' }
            },
            gridLineWidth: 1
        },
        // 右侧Y轴：对应折线图
        {
            title: {
                text: '增长率（%）',
                style: { color: '#8bbc21' }
            },
            labels: {
                style: { color: '#8bbc21' }
            },
            opposite: true,
            gridLineWidth: 0
        }
    ],
    series: [
        // 面积图1：绑定左Y轴（索引0）
        {
            name: '线上销售额',
            type: 'area',
            yAxis: 0,
            data: [10, 20, 30, 40, 50],
            color: 'rgba(47, 126, 216, 0.3)'
        },
        // 面积图2：绑定左Y轴（索引0）
        {
            name: '线下销售额',
            type: 'area',
            yAxis: 0,
            data: [8, 15, 25, 35, 45],
            color: 'rgba(47, 126, 216, 0.15)'
        },
        // 折线图：绑定右Y轴（索引1）
        {
            name: '同比增长率',
            type: 'line',
            yAxis: 1,
            data: [2, 5, 3, 7, 4],
            color: '#8bbc21',
            marker: { radius: 4 }
        }
    ]
});

预期效果说明 #

左侧Y轴显示"销售额（万元）"标签，搭配蓝色系样式；右侧Y轴显示"增长率（%）"标签，搭配绿色系样式。动态更新数据时，两侧轴的标签、样式保持独立，不会出现重复或混淆。

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