在Ionic中更新Chartjs数据集。

Question

我试图通过使用Chartjs向一个条形图数据集添加新的数据来更新它。根据文档 此处，我需要更新 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();
  }
}

图表.组件.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端点的数据之前创建了这个测试，每次请求都会返回更新的数据，我必须将其追加到现有的图表中。我的代码有什么问题，为什么图表不更新？

Answer 1

控件 Array.concat() 方法用于合并两个或多个数组。这个方法 不 改变现有的数组，而是返回一个新的数组。

因此，你应该改变你的 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();
}