Highcharts图表平移时底部oper系列异常上移问题求解

问题现象 #

Highcharts图表开启xy方向平移(panning)、缩放功能后，执行平移操作时，位于底部的"oper"系列会出现异常上移的情况。

现有配置说明 #

"oper"系列绑定的第二个Y轴已设置zoomEnabled为false，top值为90%、height值为10%，但平移图表时，该Y轴的translate属性会被重置为初始值并随平移操作产生位移。相关初始配置代码如下：

Highcharts.chart( chartKind+'Chart', {
    chart: {
        panning: {
            enabled: true,
            type: 'xy'
        },
        zoomType: 'xy',
        pinchType :'xy',
    },
    xAxis: {
        type: 'datetime',
        minTickInterval : 60 * 10000,
        width: "95%",
        offset: 10,
    },
    yAxis: [
        {
            height: '90%',
            labels : {
                format: '{value:,.0f}'
            },
        },
        { 
            zoomEnabled: false,
            categories : ["OFF","ON"],
            top: '90%',
            height: '10%',
            title : { 
                offset: -10,
                align: 'high',
                text : "Oper",
            },
            opposite: true
        },
    ],
});

问题根因 #

当panning.type设置为xy时，Highcharts的平移逻辑默认会对所有Y轴计算位移偏移，zoomEnabled: false仅控制轴不响应缩放操作，不会把轴排除在平移计算范围外，最终导致设置了固定位置的底部Y轴被错误修改偏移属性，出现系列上移的异常。

解决方案 #

根据业务需求二选一即可：

方案1：仅保留X轴平移（改造成本最低） #

如果业务不需要Y轴方向的平移能力，直接将panning类型改为x，从根源上避免Y轴被平移逻辑影响，修改后chart配置片段如下：

chart: {
    panning: {
        enabled: true,
        type: 'x' // 仅允许X轴方向平移
    },
    zoomType: 'xy',
    pinchType :'xy',
}

方案2：保留XY平移能力，单独禁用固定轴的平移响应 #

如果需要保留全方向平移能力，给固定位置的第二个Y轴新增panningEnabled: false配置即可——这个属性是Highcharts专门用来控制单轴是否响应平移操作的独立配置，和缩放控制互不影响，大部分人出问题都是漏加了这个配置，只关了缩放没关平移。修改后的第二个Y轴配置片段如下：

{ 
    zoomEnabled: false,
    panningEnabled: false, // 新增该行，禁止该轴响应平移操作
    categories : ["OFF","ON"],
    top: '90%',
    height: '10%',
    title : { 
        offset: -10,
        align: 'high',
        text : "Oper",
    },
    opposite: true
}

如果你使用的Highcharts版本低于7.1.0，没有panningEnabled配置项，可以通过chart的pan事件手动锁死底部Y轴的偏移，配置示例：

chart: {
    panning: { enabled: true, type: 'xy' },
    zoomType: 'xy',
    pinchType :'xy',
    events: {
        pan: function() {
            // 索引1对应第二个绑定oper系列的Y轴，强制锁死其垂直偏移
            this.yAxis[1].transY = this.yAxis[1].top;
        }
    }
}

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