Highcharts主副Y轴零点不在同一水平，如何修复？

你遇到的主副Y轴零点不在同一水平线的问题，根源在于两个Y轴的刻度范围逻辑不同：主Y轴因包含负数数据，自动计算的范围覆盖了正负区间，零点落在图表中间位置；而副Y轴被固定为0-100的百分比范围，零点在图表底部，最终导致两者错位。

下面提供两种实用的解决方案：

方案一：动态计算副Y轴范围（推荐） #

通过图表加载事件动态计算副Y轴的最小刻度值，让它的零点位置和主Y轴完全对齐，同时保留副Y轴的百分比显示逻辑（仅展示0-100的刻度）。这种方法能自适应数据变化，不管主Y轴的范围如何调整，零点始终保持对齐。

修改后的完整代码：

Highcharts.chart('container', {
    chart: {
        events: {
            load: function() {
                const primaryYAxis = this.yAxis[0];
                const secondaryYAxis = this.yAxis[1];
                // 计算副Y轴的min值，保证零点位置与主Y轴一致
                const primaryRange = primaryYAxis.max - primaryYAxis.min;
                const zeroRatio = primaryYAxis.min / primaryRange;
                secondaryYAxis.update({
                    min: secondaryYAxis.max * zeroRatio
                });
            }
        }
    },
    title: {
        text: 'Stückzahl'
    },
    xAxis: {
        categories: ['5007.205.1.1.1', '5007.225.1.1.1', '5007.285.1.1.1'],
        labels:{
            enabled: false
        }
    },
    credits: {
        enabled: false
    },
    legend:{
        enabled: false
    },
    yAxis: [{
        title: {
            text: 'Stückzahl',
        },
        opposite: false
    },{
        title: {
            text: 'FOR[%]',
        },
        opposite: true,
        max:100,
        labels: {
            // 隐藏负数刻度标签，只显示0-100的百分比
            formatter: function() {
                return this.value >= 0 ? this.value : '';
            }
        }
    }],
    series: [
        {
            type: 'column',
            name: 'Sollwert',
            pointWidth:30,
            grouping: false,
            color: 'rgba(0,0,0,0.1)',
            data: [2000, 1500, 1600],
            yAxis: 0
        },{
            dataLabels:{
                enabled:true
            },
            type: 'column',
            grouping: false,
            pointWidth:20,
            name: 'John',
            data: [1941, 975, 1936],
            yAxis: 0
        },{
            dataLabels:{
                enabled:true
            },
            color:'#ef703e',
            grouping: false,
            pointWidth:20,
            type: 'column',
            data: [-27, -15, -350],
            yAxis: 0
        },{
            color:'black',
            data: [80,60,99],
            yAxis: 1,
            type: 'line'
        }]
});

方案二：固定主Y轴范围（适合数据稳定场景） #

如果你的数据范围不会发生变化，可以手动设置主Y轴的min和max，同时调整副Y轴的min值，让两者零点位置对齐。比如主Y轴范围设为-400到2000，副Y轴的min设为-20（计算逻辑：100 * (-400)/(2000 - (-400)) ≈ -16.67，取整为-20），同样隐藏负数刻度标签即可。

修改后的主副Y轴配置示例：

yAxis: [{
    title: {
        text: 'Stückzahl',
    },
    opposite: false,
    min: -400,
    max: 2000
},{
    title: {
        text: 'FOR[%]',
    },
    opposite: true,
    max:100,
    min: -20,
    labels: {
        formatter: function() {
            return this.value >= 0 ? this.value : '';
        }
    }
}],

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