从数据库动态更新高角度图表

Question

我在angular 6应用程序中使用的是highcharts angular。当我设置数据时，在ngOnInit中，图表是可见的，并且工作正常。

但我想动态更新图表系列，这意味着为系列添加点，添加新系列。。。这将在调用web API并获取新数据后完成，调用loadBidChartData((。

若我为聊天设置了新的系列，或者更新了系列，图表并没有变化，初始状态并没有变化。如何解决此问题

以下是示例代码的小平静在html中是这样的：

<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions" style="width: 100%; height: 400px; display: block; overflow: auto;" [update]="true" ></highcharts-chart> 

角度：

import * as Highcharts from 'highcharts';
export class ExampleComponent implements OnInit {
Highcharts = Highcharts; // required    
chartOptions = {
chart: {
type: "scatter",
width: 900           
},
},
tooltip: {
valueDecimals: 0,
formatter: function () {
return this.y + ' €';
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',            
},
yAxis: {
type: 'number',            
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
floating: false,
borderWidth: 1
},
series: []      
};
ngOnInit(): void {
this.chartOptions.series= [{
name: 'first last',
data: [[Date.UTC(2018, 11, 16, 10, 56, 25), 23], [Date.UTC(2018, 11, 16, 10, 57, 15), 132], [Date.UTC(2018, 11, 16, 10, 58, 2), 312], [Date.UTC(2018, 11, 16, 10, 58, 15), 432]]
}];
}
loadBidChartData(bidApiModel: BidItem[]): void {
this.chartOptions.series= [{
name: 'first last',
data: [[Date.UTC(2018, 11, 16, 10, 56, 25), 23], [Date.UTC(2018, 11, 16, 10, 57, 15), 132], [Date.UTC(2018, 11, 16, 10, 58, 2), 312], [Date.UTC(2018, 11, 16, 10, 58, 15), 432]]
},
{
name: 'second last',
data: [[Date.UTC(2018, 11, 16, 10, 56, 28), 50], [Date.UTC(2018, 11, 16, 10, 56, 45), 152], [Date.UTC(2018, 11, 16, 10, 56, 53), 250], [Date.UTC(2018, 11, 16, 10, 57, 11), 320]]
}];
}
}  

解决方案：在后台更新演示，并在高图中添加和删除点：https://stackblitz.com/edit/angular-bv26xz
感谢User3250和Wojciech Chmiel的帮助。

Answer 1

您需要使用[(update)]标志来更新系列，如下所示：

loadBidChartData(bidApiModel: BidItem[]): void {
this.chartOptions.series= [{
name: 'first last',
data: [[Date.UTC(2018, 11, 16, 10, 56, 25), 23], [Date.UTC(2018, 11, 16, 10, 57, 15), 132], [Date.UTC(2018, 11, 16, 10, 58, 2), 312], [Date.UTC(2018, 11, 16, 10, 58, 15), 432]]
},
{
name: 'second last',
data: [[Date.UTC(2018, 11, 16, 10, 56, 28), 50], [Date.UTC(2018, 11, 16, 10, 56, 45), 152], [Date.UTC(2018, 11, 16, 10, 56, 53), 250], [Date.UTC(2018, 11, 16, 10, 57, 11), 320]]
}];
this.updateFlag = true;
}
<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions" style="width: 100%; height: 400px; display: block; overflow: auto;" [(update)]="updateFlag" ></highcharts-chart>

在此处进行演示：https://stackblitz.com/edit/angular-d5spve