Highcharts钻取图表仅触发二级图表点击事件的实现问询

嘿，这个场景我之前帮朋友处理过，刚好能给你两个靠谱的解决方案，完美解决一级图表误触发点击事件的问题：

方案一：仅给二级钻取系列绑定点击事件 #

最直接的方式就是不在全局plotOptions里统一加点击事件，而是把事件单独绑定到每个二级钻取系列上。因为Highcharts的钻取系列是在drilldown.series里单独定义的，这样只有点击二级柱子才会触发逻辑：

// 示例配置
Highcharts.chart('container', {
  // 一级图表基础配置...
  drilldown: {
    series: [
      {
        name: '二级系列A',
        id: '一级系列ID1', // 对应一级系列的drilldown属性
        data: [['项1', 10], ['项2', 20]],
        // 给这个二级系列单独加点击事件
        events: {
          click: function(event) {
            console.log(event);
            alert("testing" + event.point.name);
          }
        }
      },
      {
        name: '二级系列B',
        id: '一级系列ID2',
        data: [['项3', 15], ['项4', 25]],
        // 其他二级系列同理绑定事件
        events: {
          click: function(event) {
            console.log(event);
            alert("testing" + event.point.name);
          }
        }
      }
    ]
  }
});

这个方案的优势是精准，完全不会影响一级图表的交互逻辑。

方案二：在全局事件里判断当前图表层级 #

如果不想逐个给二级系列加事件，可以在全局点击事件里通过Highcharts的内置属性判断当前是否处于二级钻取状态：

方法1：通过drilldownLevels长度判断 #

当用户钻取到二级图表时，图表的drilldownLevels数组会存储钻取历史（长度为1）；返回一级后，数组长度变回0。利用这个特性做判断：

plotOptions: {
  series: {
    events: {
      click: function(event) {
        // 仅当处于钻取后的二级图表时触发逻辑
        if (this.chart.drilldownLevels.length > 0) {
          console.log(event);
          alert("testing" + event.point.name);
        }
      }
    }
  }
}

方法2：通过系列是否有钻取配置判断 #

一级系列通常会配置drilldown属性（指定要钻取的二级系列ID），而二级系列一般没有这个属性。所以可以通过这个区分：

plotOptions: {
  series: {
    events: {
      click: function(event) {
        // 仅当当前系列没有钻取配置（即二级系列）时触发
        if (!event.point.series.options.drilldown) {
          console.log(event);
          alert("testing" + event.point.name);
        }
      }
    }
  }
}

这个方案更灵活，适合有大量二级系列的场景，不用重复写事件代码。

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