如何在Highcharts的点击事件中获取被点击图表的数值

没问题，我来帮你搞定这个需求！在Highcharts的点点击事件里，你可以通过this关键字直接访问被点击的点对象，轻松拿到它的数值以及其他相关属性。

修改后的完整配置代码 #

下面是调整后的配置，我已经更新了点击事件的逻辑，用来获取并展示点击点的数值：

{
  "series": [
    {
      "name": "Requests",
      "colorByPoint": true,
      "data": [
        { "name": "Pending", "y": 62, "drilldown": "Pending" },
        { "name": "Completed", "y": 20, "drilldown": "Completed" },
        { "name": "Rejected", "y": 18, "drilldown": "Rejected" }
      ]
    }
  ],
  "drilldown": {
    "series": [
      {
        "name": "Requests",
        "id": "Pending",
        "data": [ ["New Version", 21], ["HotFixes", 13] ],
        "point": {
          "events": {
            "click": function() {
              // 获取点击点的核心信息
              const pointValue = this.y;
              const pointName = this.name;
              alert(`点击了【${pointName}】，对应的数值是：${pointValue}`);
              
              // 如果需要更多上下文信息，还能这么拿
              // console.log("所属系列名称：", this.series.name);
              // console.log("点的完整数据对象：", this);
            }
          }
        }
      }
    ]
  }
}

核心逻辑说明 #

在点的click事件回调里，this就代表当前被点击的Point实例对象，它包含了这个点的所有属性：

• this.y：直接获取点的数值（也就是你要的对应数值）
• this.name：获取点的名称（比如示例里的"New Version"）
• this.series：获取该点所属的系列对象，能进一步拿到系列名称、全系列数据等信息

如果你的需求不是弹窗展示，而是把数值用于其他业务逻辑（比如发送接口请求、更新页面元素），直接把alert替换成你的业务代码就行，this.y可以直接当作数值使用。

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