如何获取AnyChart旭日图（Sunburst）中点击的最底层元素

问题说明 #

在使用AnyChart的Sunburst旭日图时，存在两个核心问题：

• 调用chart.getDrilldownPath()仅能获取内层层级，无法捕获点击的最底层叶子节点元素
• 现有代码仅监听了chartDraw事件，缺少针对节点点击的监听逻辑，无法识别具体点击的元素

解决方案 #

替换原有的chartDraw监听，改为监听节点点击事件pointClick，该事件可直接获取点击节点的完整数据。同时结合chart.getDrilldownPath()，就能同时拿到从根节点到当前点击节点的完整路径，以及点击的具体元素信息。

修改后的完整代码 #

<html>
<body>
  <div id="container"></div>

  <script>
    anychart.onDocumentReady(function () {
      // 创建数据
      var data = [
        {
          name: "Company A",
          children: [
            {
              name: "Technical",
              children: [
                { name: "Team Leaders" },
                { name: "Architects" },
                { name: "Developers" },
                { name: "Testers" },
              ],
            },
            {
              name: "Sales",
              children: [{ name: "Analysts" }, { name: "Executives" }],
            },
            { name: "HR" },
            { name: "Management" },
          ],
        },
      ];

      // 创建旭日图并设置数据
      var chart = anychart.sunburst(data, "as-tree");

      // 设置计算模式
      chart.calculationMode("ordinal-from-root");

      // 设置图表标题
      chart.title().useHtml(true);
      chart.title(
        "Sunburst: Calculation Mode (ordinal-from-root)<br><br>" +
          "<span style='font-size:12; font-style:italic'>" +
          "Corporate Structure</span>"
      );

      // 监听节点点击事件
      chart.listen('pointClick', function (event) {
        // 获取点击的具体节点
        const clickedPoint = event.point;
        // 获取从根到当前节点的完整路径
        const drilldownPath = chart.getDrilldownPath();
        // 打印结果（可根据需求替换为业务逻辑）
        console.log("点击的节点:", clickedPoint.get("name"));
        console.log("完整层级路径:", drilldownPath.map(item => item.get("name")));
      });

      // 设置容器
      chart.container("container");
      // 绘制图表
      chart.draw();
    });
  </script>
</body>
</html>

关键说明 #

• pointClick是AnyChart为图表节点提供的专属点击监听，回调参数event中的point属性包含当前点击节点的所有数据，可通过get("name")等方法获取节点属性
• chart.getDrilldownPath()返回层级路径数组，每个元素对应路径上的一个节点，结合点击节点数据，就能完整获取点击位置的层级和具体元素信息

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