如何在组织高图角度中突出显示子节点?

Question

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

目前，我正在使用静态数据创建它，但它应该基于 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. 如何在所有子节点和单击的节点上应用活动类

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 样式.css

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

这是更新的堆栈闪电战演示

希望这有帮助。

谢谢