更新数据图表js Angular

问题描述 投票:0回答:1

这是我的打字稿代码:

  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()
或类似的。 我该怎么办?

angular chart.js
1个回答
0
投票

你可以尝试创建一个新的内存引用(对象是数组作为引用存储在内存中,所以即使我们更新内部对象属性,内存引用也不会改变)。

我们可以使用

Object Destructuring
,以便 Angular 识别基础对象已更改并刷新图表。

setBar() {
    ...
    // need here to update the charts
    this.barChartData = { ...this.barChartData }; // object destructuring creates new memory reference
}

Angular ng 图表将注意到这个新的内存引用并运行

ngOnChanges
,希望此调用将使用最新数据更新图表。

© www.soinside.com 2019 - 2024. All rights reserved.