在 Ionic 中更新 Chartjs 数据集

Question

我试图通过使用 Chartjs 将更新的数据附加到条形图数据集来更新它。根据文档 here，我需要更新 datasets.data 数组和 labels。我在 Ionic 中创建了以下组件：

chart.component.ts

import { SensorDataService } from './sensor-data.service';
import { Component, Input, AfterViewInit, ViewChild, ElementRef } from '@angular/core';


declare var Chart: any;

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.scss'],
})
export class ChartComponent implements AfterViewInit {
  //@Input() chartId: string;
  //@Input() chartTitle: string;
  @Input() data: Array<number>;
  @Input() labels: Array<string>;
  //@Input() datasetLabel: string;
  interval: any;
  count: number;
  @ViewChild('chart') chartRef: ElementRef;
  chart: any;

  constructor(private dataService: SensorDataService) { }

  ngAfterViewInit() {
    console.log(this.data);
    console.log(this.labels);
    this.chart = new Chart(this.chartRef.nativeElement, {
      type: 'bar',
      data: {
        labels: this.labels,
        datasets: [{
          label: 'label',
          data: this.data,
          backgroundColor: 'rgb(0, 0, 255)',
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      }
    });
    this.count = 0;
    this.interval = setInterval(this.loadData.bind(this), 5000);
  }
  loadData() {
    if (this.count > 10) {
      return clearInterval(this.interval);
    }
    const { data, labels } = this.dataService.getData();
    console.log('data loaded');
    console.log(this.chart.data.labels);
    console.log(this.chart.data.datasets[0].data);
    this.chart.data.labels.concat(labels);
    this.chart.data.datasets.forEach(ds => ds.data.concat(data));
    this.count++;
    this.chart.update();
  }
}

chart.component.html

<ion-card>
    <ion-card-header>
        <ion-card-title>Title</ion-card-title>
    </ion-card-header>
    <ion-card-content>
        <canvas #chart></canvas>
    </ion-card-content>
</ion-card>

从控制台日志中，我没有看到数组大小有任何变化。该图也保持不变。我在连接来自 http 端点的数据之前将其创建为测试，每个请求都会 return 更新数据，我必须将其附加到现有图表。我在此处给出的代码有什么问题，为什么图表没有更新？

Answer 1

Array.concat()方法用于合并两个或多个数组。此方法不会更改现有数组，而是returns一个新数组。

因此，您应该按如下方式更改 loadData() 方法：

loadData() {
  if (this.count > 10) {
    return clearInterval(this.interval);
  }
  const { data, labels } = this.dataService.getData();
  this.chart.data.labels = this.chart.data.labels.concat(labels);
  this.chart.data.datasets.forEach(ds => ds.data = ds.data.concat(data));
  this.count++;
  this.chart.update();
}

在 Ionic 中更新 Chartjs 数据集

Updating Chartjs dataset in Ionic

chart.js

ionic4