Highcharts --> organization chart --> 切换节点可见性

Question

我想在 Highcharts Organisation chart (Highcharts) 中为节点添加点击切换可见性。是否有对此的内置支持？

Answer 1

此功能在常规 Highcharts API 中不可用，但我创建了一个 example/guideline 如何自己实现它。

首先，您需要在 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 点以查看其工作原理。

Highcharts --> organization chart --> 切换节点可见性

Highcharts --> organisation chart --> toggle visibility of node

visibility

toggle

highcharts