如何在Highcharts组织图父节点悬停时高亮父节点及对应子节点

要实现父节点悬停时同步高亮自身和子节点，核心是利用Highcharts的节点事件（mouseOver/mouseOut），结合节点的父子关联关系批量修改样式。以下是具体实现步骤：

1. 定义高亮样式（推荐用CSS类） #

先在全局样式中定义高亮样式，避免直接修改内联样式：

.highcharts-point.highlight-node {
  fill: #ff5722; /* 填充色 */
  stroke: #e64a19; /* 边框色 */
  stroke-width: 2;
}

2. 配置图表的节点事件 #

在Highcharts的series配置中，给point.events添加mouseOver和mouseOut事件处理逻辑：

Highcharts.chart('container', {
  chart: { type: 'organization' },
  series: [{
    type: 'organization',
    // 你的数据、节点配置...
    point: {
      events: {
        mouseOver: function() {
          const currentPoint = this;
          const chart = currentPoint.series.chart;
          const parentId = currentPoint.id;

          // 高亮当前父节点
          currentPoint.graphic.addClass('highlight-node');

          // 遍历所有节点，找到当前节点的子节点并高亮
          chart.series[0].points.forEach(point => {
            if (point.parent === parentId && point.graphic) {
              point.graphic.addClass('highlight-node');
            }
          });
        },
        mouseOut: function() {
          const currentPoint = this;
          const chart = currentPoint.series.chart;
          const parentId = currentPoint.id;

          // 恢复当前父节点样式
          currentPoint.graphic.removeClass('highlight-node');

          // 恢复所有子节点样式
          chart.series[0].points.forEach(point => {
            if (point.parent === parentId && point.graphic) {
              point.graphic.removeClass('highlight-node');
            }
          });
        }
      }
    }
  }],
  // 其他图表配置...
});

3. 确保节点的父子关联正确 #

你的nodes配置中，每个子节点必须通过parent属性关联到父节点的id，示例如下：

nodes: [
  { id: 'parent-1', name: '父节点1' },
  { id: 'child-1', name: '子节点1', parent: 'parent-1' },
  { id: 'child-2', name: '子节点2', parent: 'parent-1' }
]

关键说明 #

• 使用addClass/removeClass比直接update修改样式更高效，不会触发多次重绘。
• 要判断point.graphic是否存在，避免节点未渲染时出现报错。
• 如果需要高亮连接线，可以额外遍历series.links，匹配from为父节点id的连接线，添加对应的高亮类。

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