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

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演示

希望这可以帮助。