Highcharts -> организационная структура -> переключение видимости узла - PullRequest
Новая
       20

Highcharts -> организационная структура -> переключение видимости узла

0 голосов
/ 10 февраля 2020

Я бы хотел добавить видимость переключения при нажатии на узел в Организационной диаграмме Highcharts (Highcharts). Есть ли встроенная поддержка для этого? enter image description here

1 Ответ

1 голос
/ 10 февраля 2020

Эта функция недоступна в обычном API Highcharts, однако я создал пример / руководство по ее самостоятельной реализации.

Сначала необходимо скрыть точки после начальной загрузки в событиях . load callback:

Код: 

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

Далее необходимо реализовать logi c чтобы показать нужные узлы после события клика по точке. Вы можете улучшить эту логику c и код как независимую функцию, которая будет запускаться внутри обратного вызова 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/ - нажмите на точку генерального директора, чтобы увидеть, как это работает.

...