如何在Highcharts中创建具有动态序列的堆叠柱状图

Question

我试图创建一个堆叠条形图与系列是动态的(不像Highcharts的例子硬编码系列)。我做了以下操作，但它没有为不同的系列

创建堆叠列

Highcharts.chart(this.chartElement.nativeElement, {
chart: {
type: 'column'
},
title: '',
xAxis: {
type: 'datetime',
categories: this.rptng_months
},
yAxis: {
title: '',
min: 0,
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold'
}
}
},
credits: {
enabled: false
},
legend: {
enabled: true,
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 0
},     
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'black',
style: {
textOutline: 0
},
}
}
},
series: this.data.map(x=>x.Scheduled_Open),
});

我也尝试过这样的系列部分:

series: [
{
name: this.data.map(n=>n.Container),
data:this.data.map(x=>x.Scheduled_Open),
type: 'column',
cursor: 'pointer'
},

这是我的数据集的样子:

| Container   |RPTNG_Months|Scheduled_Open|
|-------------|------------|--------------|
|Container 1  |  1/1/2021  |   140        |
|Container 1  |  2/1/2021  |   140        |
|Container 1  |  3/1/2021  |   140        |
|Container 1  |  4/1/2021  |   140        |
|Container 2  |  1/1/2021  |   1117       |
|Container 2  |  2/1/2021  |   1119       |
|Container 2  |  3/1/2021  |   1119       |
|Container 2  |  4/1/2021  |   1119       |
|Container 3  |  1/1/2021  |   1359       |
|Container 3  |  2/1/2021  |   1359       |
|Container 3  |  3/1/2021  |   1358       |
|Container 3  |  4/1/2021  |   1357       |
|Container 4  |  1/1/2021  |   1237       |
|Container 4  |  2/1/2021  |   1237       |
|Container 4  |  3/1/2021  |   1238       |
|Container 4  |  4/1/2021  |   1238       |

在上面的数据集中有4个不同的容器。然而，可以有任意数量的容器。注意，我对这个示例的名称进行了消毒。这些名称实际上是有意义的。

如何使用Highcharts创建动态序列的堆叠列?

Answer 1

动态加载系列数据可以通过在load事件中加载并使用update方法执行系列更新来实现。

https://api.highcharts.com/highcharts/chart.events.load

https://api.highcharts.com/class-reference/Highcharts.Series更新

chart: {
type: 'column',
events: {
load: function() {
var chart = this,
series = [{
name: 'London',
data: [78.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}, {
name: 'New York',
data: [45.4, 45.2, 44.5, 121.7, 52.6, 44.5, 35.4, 55.4, 77.6, 65.1, 64.8, 33.1]
}, {
name: 'Las Vegas',
data: [23.4, 23.2, 23.5, 23.7, 23.6, 32.5, 32.4, 32.4, 32.6, 39.1, 32.8, 23.1]
}
];
chart.update({
series: series
}, true, true);
}
}
},

使用数据。seriesMapping来定制数据。https://api.highcharts.com/highcharts/data.seriesMapping。