Highcharts --> 组织结构图 --> 切换节点的可见性答案

【问题标题】：Highcharts --> organisation chart --> toggle visibility of nodeHighcharts --> 组织结构图 --> 切换节点的可见性
【发布时间】：2020-05-25 14:47:40
【问题描述】：

我想在Highcharts Organisation chart (Highcharts) 中的节点上添加点击切换可见性。有内置支持吗？

【问题讨论】：

标签： highcharts toggle visibility

【解决方案1】：

常规的 Highcharts API 不提供此功能，但是我创建了一个示例/指南如何自己实现它。

首先，您需要在 events.load 回调中隐藏初始加载后的点：

代码：

events: {
  load() {
  //hide nodes after initial load
    let chart = this,
      nodes = chart.series[0].nodeLookup;

    for (let i in nodes) {
      if (nodes[i].column > 2) {
        nodes[i].graphic.hide();
        nodes[i].dataLabel.hide();
        nodes[i].linksTo[0].graphic.hide();
        nodes[i].visible = false;
      }
    }
  }
}

加载事件的API：https://api.highcharts.com/highcharts/chart.events.load

接下来，您需要实现逻辑以在点击事件发生后显示想要的节点。您可以将此逻辑和代码改进为一个独立的函数，该函数将在 point.events.click 回调中触发。

代码：

  events: {
    click() {
    //show nodes
      let series = this.series,
        nodes = series.nodeLookup;

      for (let i in nodes) {
        if (nodes[i].linksTo.length && nodes[i].linksTo[0].from === "CEO") {
          if (nodes[i].visible) {
            nodes[i].graphic.hide()
            nodes[i].dataLabel.hide();
            nodes[i].visible = false;
          } else {
            nodes[i].graphic.show()
            nodes[i].dataLabel.show();
            nodes[i].visible = true;
          }

        }
      }
      this.linksFrom.forEach(link => {
        if (link.graphic.visibility == "visible") {
          link.graphic.hide()

        } else {
          link.graphic.show()
        }
      })
    }
  }

API：https://api.highcharts.com/highcharts/series.organization.data.events.click

演示：https://jsfiddle.net/BlackLabel/b5nxv6k9/ - 单击 CEO 点以查看其工作原理。

【讨论】：