折叠/展开子节点

Question

在Highcharts组织结构图中，有一种方法可以隐藏下面的人员。举例来说，如果您有CEO，有5个人向他们汇报。我可以在CEO节点上添加一个按钮，该按钮一旦单击将隐藏所有子级？如果CTO向CEO汇报却更深，但CTO有9个人向她汇报，我可以隐藏CTO的孩子和CEO吗？非常感谢。

Answer 1

我准备了一个如何在自定义Highcharts按钮上隐藏/显示CEO节点下的节点的示例。通过使用此逻辑，您应该能够创建其余所需的折叠按钮。

演示：https://jsfiddle.net/BlackLabel/7orp61kx/

渲染事件上的渲染响应按钮：

events: {
  render() {
    let chart = this,
      points = chart.series[0].points,
      ceoPoint = points[1].toNode,
      buttonX = ceoPoint.dataLabel.translateX,
      buttonY = ceoPoint.dataLabel.translateY + chart.plotTop;

    // check if button exist after window resize
    if (chart.ceoButton) {
      chart.ceoButton.destroy();
    }
    // create button 
    chart.ceoButton = chart.renderer.button('hide/show children', buttonX, buttonY, hideShow).add()
    // translate button
    chart.ceoButton.translate(buttonX - chart.ceoButton.getBBox().width, buttonY + chart.ceoButton.getBBox().height / 3)
  }
}

hideShow函数：

function hideShow() {
  chart.series[0].points.forEach((p, i) => {
    if (i > 1) {
      if (p.state === "") {
        p.graphic.hide();
        p.toNode.graphic.hide();
        p.toNode.dataLabel.hide();

        p.state = 'hidden';
      } else {
        p.graphic.show();
        p.toNode.graphic.show();
        p.toNode.dataLabel.show();

        p.state = ""
      }
    }
  })
}

API：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button

API：https://api.highcharts.com/highcharts/chart.events.render