如何突出显示组织高图表角度中的子节点？

Question

我正在尝试使用角度的 highcharts 组织模块构建图表。

目前，我正在使用静态数据创建它，但它应该基于 api 结果创建。

我还希望每当单击任何节点时，都应将活动类应用于此及其子级。我为此使用了单击事件，并且正在应用类，但 css 没有反映。

下面是我的代码行你能建议吗

比较

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;

}

堆栈闪电链接

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

我被卡住了如何使它与 api 数据一起使用

如何在所有子节点和单击节点上应用活动类

Answer 1

根据 css 的其他答案尝试在 style.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

要通过单击父节点来激活子节点，请执行以下操作：在 style.css 中添加 .active 样式.active {  font-size: 30px;  background-color: red;}这是更新的 stackblitz演示希望这可以帮助。