Как выделить дочерние узлы на диаграммах angular организации?

Question

Я пытаюсь построить диаграмму, используя модуль организации highcharts в angular.

В настоящее время я создаю ее, используя данные stati c, но она должна быть создана на основе результата api.

Также я хочу, чтобы всякий раз, когда щелкают по любому узлу, к нему и его дочернему элементу должен применяться активный класс. Я использовал для этого событие щелчка, и класс применяется, но css не отражает.

ниже - моя строка кода, можете ли вы предложить

comp.ts

export class OrganisationComponent implements OnInit {
  public options: any = {
    chart: {
      height: 600,
      inverted: true
    },
    title: {
      text: 'Org Chart'
    },
    series: [{
      type: 'organization',
      name: 'Highsoft',
      keys: ['from', 'to'],
      cursor: 'pointer',
      events: {
        click: function (event) {
          event.point.linksFrom.forEach(element => {
            if(element.toNode){
              if(element.toNode.linksFrom){
                element.toNode.linksFrom.forEach(innerElement => {
                  innerElement.toNode.dataLabel.addClass('active');
                })
              }
            }
            element.toNode.dataLabel.addClass('active');
          });
        }
    },
      data: [
        ['PMO', 'TM'],
        ['TM', 'D1'],
        ['TM', 'D2'],
        ['TM', 'D3'],
        ['D1', 'Intern'],
      ],
      nodes: [
        {
          id: 'PMO',
          icon: 'account_circle',
          name: 'Project Manager'
        },
        {
          id: 'TM',
          icon: 'account_circle',
          name: 'Team Lead'
        },
        {
          id: 'D1',
          icon: 'account_circle',
          name: 'Developer 1'
        },
        {
          id: 'D2',
          icon: 'account_circle',
          name: 'Developer 2'
        },
        {
          id: 'D3',
          icon: 'account_circle',
          name: 'Developer 3'
        },
        {
          id: 'Intern',
          icon: 'account_circle',
          name: 'Intern'
        },
      ],
      dataLabels: {
        nodeFormat : `{point.name}`
      }
    }],

  };
  
  constructor() {}

  ngOnInit() {
    Highcharts.chart('container', this.options); // organization

  }

}

. html

. css

.active {
   font-size: 22px;
   color: red;
}

stackblitz ссылка

https://stackblitz.com/edit/angular-bar-highcharts-bnom1n

1. Я застрял, как я могу заставить его работать с данными api
2. как применить активный класс ко всем дочерним узлам и щелкнуть node

Answer 1

Попробуйте добавить стили в стиле. css в соответствии с другим ответом для css, для выделения уровня n попробуйте этот рекурсивный подход. // обновить событие клика, как показано ниже

  events: {
        click: function (event) {
          event.point.linksFrom.forEach(element => {
            highlightPoints(element);
            element.toNode.dataLabel.addClass('active');
          });
          function highlightPoints(element){
                if(element.toNode){
              if(element.toNode.linksFrom){
                element.toNode.linksFrom.forEach(innerElement => {
                  highlightPoints(innerElement);
                  innerElement.toNode.dataLabel.addClass('active');
                })
              }
            }
          }
        }

Answer 2

Для активных дочерних узлов, щелкнув родительский узел, выполните следующие действия:

добавьте .active стиль в style. css

.active {
  font-size: 30px;
  background-color: red;
}

Вот обновленная демонстрация stackblitz

Надеюсь, это поможет.

Спасибо