如何实现Highcharts组织图节点悬停时高亮根节点到当前节点的全路径

官方自带的CSS高亮样式仅支持直接父节点高亮，无法覆盖全链路，可通过自定义事件监听+递归遍历祖先节点实现需求，具体实现步骤如下： #

1. 新增自定义高亮样式 #

在样式文件中加入节点和链路的高亮规则：

/* 节点高亮样式 */
.highlight-path .highcharts-point {
  fill: #7cb5ec !important;
  stroke: #2f7ed8 !important;
  stroke-width: 2px !important;
}
/* 链路连线高亮样式 */
.highlight-path-link {
  stroke: #2f7ed8 !important;
  stroke-width: 2px !important;
}

2. 配置组织图节点事件 #

在Highcharts配置项的plotOptions.orgchart.point.events中加入悬停事件回调，递归处理所有祖先节点，原有配置（包括折叠逻辑）无需修改：

Highcharts.chart('container', {
  // 原有配置保留
  plotOptions: {
    orgchart: {
      // 原有配置保留
      point: {
        events: {
          mouseOver: function () {
            let currentNode = this;
            // 循环向上遍历所有父节点直到根节点
            while (currentNode) {
              // 给当前节点添加高亮类
              currentNode.graphic?.addClass('highlight-path');
              // 给当前节点连向父节点的连线加高亮类
              currentNode.linksTo?.forEach(link => {
                link.graphic?.addClass('highlight-path-link');
              });
              // 切换为父节点继续遍历
              currentNode = currentNode.parentNode;
            }
          },
          mouseOut: function () {
            let currentNode = this;
            // 移除全路径的高亮类
            while (currentNode) {
              currentNode.graphic?.removeClass('highlight-path');
              currentNode.linksTo?.forEach(link => {
                link.graphic?.removeClass('highlight-path-link');
              });
              currentNode = currentNode.parentNode;
            }
          }
        }
      }
    }
  }
});

方案说明 #

• 该逻辑与你已实现的节点折叠功能完全兼容，折叠隐藏的节点不会触发样式修改
• 可根据需求自行调整CSS中的高亮颜色、边框宽度等样式属性

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