时间戳

首页 > 解决方案 > 如何突出显示组织高图表角度中的子节点？

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

问题描述

我正在尝试使用角度的 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

  1. 我被卡住了如何使它与 api 数据一起使用
  2. 如何在所有子节点和单击节点上应用活动类

标签： javascriptangularhighcharts

解决方案

根据 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');
                })
              }
            }
          }
        }

推荐阅读