如何在组织中单击时一次在模态中打开多个图表

Question

在组织结构图中，我试图在点击任何节点时同时打开多个图表，但在尝试打开时出错。

以下是我所指的代码。请帮助我如何同时打开多个高线图(不同类型，如折线图、条形图(。如有任何帮助，我们将不胜感激。提前谢谢。

https://stackblitz.com/edit/highcharts-angular-line-n2zhsq?file=src%2Fapp%2Fapp.component.html，src%2App%2App.component.ts

Answer 1

问题似乎是在jsfiddle中，有一些代码可以创建一个新的Highcharts图表，但在Angular组件中似乎还没有。看来你还有更多的工作要做！

events: {
click: function() {
const popup = document.getElementById('popup');
const popupContent = document.getElementById('popupContent');
popup.style.display = 'block';
Highcharts.chart(popupContent, {
chart: {
width: 200
},
series: [{
type: 'organization',
data: nestedChartData[this.id]
}]
});
this.series.chart.update({
tooltip: {
enabled: false
}
});
}
}

Answer 2

图表类型与数据相关，我将数据Department1更改为API series.line.data中的行类型数据，现在您可以按行类型打开图表。

const nestedChartData = {
Department1: [1, 2, 4, 5],
Department2: [
[0, 1],
[1, 2],
[2, 8]
],
Department3: [{
x: 1,
y: 9,
name: "Point2",
color: "#00FF00"
}, {
x: 1,
y: 6,
name: "Point1",
color: "#FF00FF"
}],
};

演示：https://stackblitz.com/edit/highcharts-angular-line-rqg4hy

编辑

我准备了一个简化的演示，在点事件点击中创建新的HTML元素。

演示：https://jsfiddle.net/BlackLabel/fud5q19a/