这是我的打字稿代码:
public barChartData: ChartConfiguration<'bar'>['data'] = {
labels: [ '2006', '2007', '2008', '2009', '2010', '2011', '2012' ],
datasets: [
{ data: [ 65, 59, 80, 81, 56, 55, 40 ], label: 'Series A' },
{ data: [ 65, 59, 80, 81, 56, 55, 40 ], label: 'Series B' },
{ data: [ 28, 48, 40, 19, 86, 27, 90 ], label: 'Series C' }
]
};
HTML代码:
<canvas baseChart
[data]="barChartData"
[options]="barChartOptions"
[legend]="barChartLegend"
[type]="'bar'">
</canvas>
所以在 UI 中我设置了无线电组、日、月、每年。 当我单击收音机时,我调用另一个返回数据集的方法:
setBar() {
this.barChartData.datasets = []
this.barChartData.labels = []
if(this.statisticsRes.length > 0) {
let labelsSet: string[] = []
if(this.optionTimer == environment.statisticTime.daily){
labelsSet = this.getLast24Hours();
}
if(this.optionTimer == environment.statisticTime.monthly){
labelsSet = this.getLast30Days();
}
if(this.optionTimer == environment.statisticTime.annual) {
labelsSet = this.getLast12Months();
}
this.barChartData.labels = labelsSet
// BAR
this.barChartData.datasets = [
{
data: this.statisticsRes.map((o) => o.travelcounter).reverse(),
label: 'Travelcounter'
},
{
data: this.statisticsRes.map((o) => o.odometer).reverse(),
label: 'Odometer [m]'
},
{
data: this.statisticsRes.map((o) => o.countoutofservice).reverse(),
label: 'Number of blocking errors'
}
]
// need here to update the charts
}
}
我需要更新数据,但没有:
this.barChartData.update()
或类似的。
我该怎么办?
你可以尝试创建一个新的内存引用(对象是数组作为引用存储在内存中,所以即使我们更新内部对象属性,内存引用也不会改变)。
我们可以使用
Object Destructuring
,以便 Angular 识别基础对象已更改并刷新图表。
setBar() {
...
// need here to update the charts
this.barChartData = { ...this.barChartData }; // object destructuring creates new memory reference
}
Angular ng 图表将注意到这个新的内存引用并运行
ngOnChanges
,希望此调用将使用最新数据更新图表。