Highchart在drill up事件添加更新逻辑后标签消失问题求助

问题现象 #

为Highchart滚动条添加自定义更新逻辑后，执行drill up操作时出现图表标签消失问题，各阶段运行状态如下：

• 初始drilldown图表状态
  
• drilldown执行完成后状态
  
• drillup执行完成后状态
  

根因定位 #

自定义滚动条更新逻辑中直接重写了x轴类目配置，和Highchart原生钻取事件的轴数据更新逻辑存在时序冲突：drillup触发时原生逻辑会自动重置x轴类目，但自定义滚动条更新逻辑没有同步执行，导致x轴渲染时类目匹配失败，标签无法正常渲染。

修复方案 #

1. 封装滚动条同步逻辑 #

将原有滚动条更新逻辑抽为独立函数，直接读取当前图表实例的实时轴数据，不要使用静态配置的类目值：

function syncScrollbar(chart) {
  chart.update({
    scrollbar: {
      enabled: true,
      minWidth: 10,
      showFull: false
    },
    xAxis: {
      categories: chart.xAxis[0].categories
    }
  }, true, false);
}

2. 绑定钻取事件回调 #

在图表初始化配置的events字段中，将滚动条同步逻辑和drilldown、drillup事件绑定，确保原生钻取逻辑执行完成后再更新滚动条配置：

Highcharts.chart('container', {
  // 原有所有配置保持不变，仅新增以下events配置
  chart: {
    events: {
      drilldown: function() {
        setTimeout(() => syncScrollbar(this), 0)
      },
      drillup: function() {
        setTimeout(() => syncScrollbar(this), 0)
      }
    }
  }
})

注：添加setTimeout是为了避开原生钻取逻辑的执行时序，避免数据还没更新就执行滚动条同步的问题

验证效果 #

修改后执行钻取操作时，x轴类目会跟随当前钻取层级同步更新，滚动条逻辑和原生钻取逻辑不再冲突，标签可以正常显示。

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