Highcharts热力图如何实现X/Y轴标签点击触发指定下钻

我使用Highcharts构建了支持drilldown功能的热力图，基础功能运行正常，需要额外实现坐标轴标签点击触发下钻的能力：

• 点击Y轴的「California」标签时，图表下钻至id为California_years的drilldown serie
• 点击X轴的「2015」标签时，图表下钻至id为States_2015的drilldown serie

目前已在每个serie中配置axe_x、axe_y属性，在drilldown/drillup事件中通过这两个属性值动态更新坐标轴配置，原有代码如下：

events:{
  drilldown: function(e) {
    var chart = this;
    chart.yAxis[0].update({
            type: 'category',
            categories: y_axes[e.seriesOptions.axe_y]
                    });
    chart.xAxis[0].update({
            type: 'category',
            categories: x_axes[e.seriesOptions.axe_x]
                    });
  },
  drillup: function(e) {
    var chart = this;
    chart.yAxis[0].update({
            type: 'category',
            categories: y_axes[e.seriesOptions.axe_y]
                    });
    chart.xAxis[0].update({
            type: 'category',
            categories: x_axes[e.seriesOptions.axe_x]
                    });
  }
}

核心逻辑分为标签事件绑定、原有上下钻逻辑修正两部分：

1. 绑定坐标轴标签点击事件 #

Highcharts每次渲染完成后，X、Y轴的刻度标签都会生成对应的DOM节点，可在图表的render事件中遍历所有轴刻度，给标签绑定点击逻辑，同时添加可点击样式提示。
需要给已绑定事件的标签添加标记，避免render事件多次触发时重复绑定事件。绑定逻辑示例：

chart: {
  type: 'heatmap',
  events: {
    render() {
      const chart = this;
      // 绑定Y轴标签点击下钻
      Object.values(chart.yAxis[0].ticks).forEach(tick => {
        if (!tick.label || tick.label.element.hasBindDrill) return;
        tick.label.element.hasBindDrill = true;
        tick.label.element.style.cursor = 'pointer';
        tick.label.element.addEventListener('click', () => {
          const labelVal = tick.textContentStr || tick.element.textContent;
          // 按规则匹配下钻series的id，可根据自己的id映射规则调整
          const targetDrillId = `${labelVal}_years`;
          const targetSeries = chart.options.drilldown.series.find(s => s.id === targetDrillId);
          if (!targetSeries) return;
          // 先回到顶层避免多层下钻状态混乱
          chart.drillUp();
          chart.addSeriesAsDrilldown(tick, targetSeries);
        });
      });
      // 绑定X轴标签点击下钻
      Object.values(chart.xAxis[0].ticks).forEach(tick => {
        if (!tick.label || tick.label.element.hasBindDrill) return;
        tick.label.element.hasBindDrill = true;
        tick.label.element.style.cursor = 'pointer';
        tick.label.element.addEventListener('click', () => {
          const labelVal = tick.textContentStr || tick.element.textContent;
          // 按规则匹配下钻series的id
          const targetDrillId = `States_${labelVal}`;
          const targetSeries = chart.options.drilldown.series.find(s => s.id === targetDrillId);
          if (!targetSeries) return;
          chart.drillUp();
          chart.addSeriesAsDrilldown(tick, targetSeries);
        });
      });
    },
    // 修正后的drilldown、drillup事件放在此处
  }
}

2. 修正原有上下钻事件逻辑 #

原有代码存在两个问题：

• drillup事件中e.seriesOptions指向的是刚退出的下钻层series，不是顶层原始series，会导致坐标轴分类回滚错误
• 连续调用两次axis.update会触发两次图表重绘，存在不必要的性能损耗

修正后的事件代码如下：

drilldown: function(e) {
  const chart = this;
  // 第二个参数传false，更新Y轴时不触发重绘
  chart.yAxis[0].update({
    type: 'category',
    categories: y_axes[e.seriesOptions.axe_y]
  }, false);
  // 更新X轴后统一重绘
  chart.xAxis[0].update({
    type: 'category',
    categories: x_axes[e.seriesOptions.axe_x]
  }, true);
},
drillup: function() {
  const chart = this;
  // 取顶层非下钻的series配置，获取原始坐标轴分类
  const rootSeries = chart.series.find(s => !s.isDrilldown);
  chart.yAxis[0].update({
    type: 'category',
    categories: y_axes[rootSeries.options.axe_y]
  }, false);
  chart.xAxis[0].update({
    type: 'category',
    categories: x_axes[rootSeries.options.axe_x]
  }, true);
}

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