Chart.js 在Ionic中更新Chartjs数据集

我试图通过使用Chartjs向条形图数据集添加更新的数据来更新条形图数据集。根据doc，我需要更新

数据集。数据

数组和

标签

。我在爱奥尼亚创建了以下组件：

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();
  }
}

从“/sensor data.service”导入{SensorDataService}；
从“@angular/core”导入{Component，Input，AfterViewInit，ViewChild，ElementRef}；
申报var图表：有；
@组成部分({
选择器：“应用程序图表”，
templateUrl:'./chart.component.html'，
样式URL:['./chart.component.scss']，
})
导出类ChartComponent实现AfterViewInit{
//@Input（）chartId:string；
//@Input（）图表标题：字符串；
@Input（）数据：数组；
@Input（）标签：数组；
//@Input（）datasetLabel:string；
间隔时间：任意；
计数：数字；
@ViewChild（“图表”）chartRef:ElementRef；
图表：任何；
构造函数（私有数据服务：SensorDataService）{}
ngAfterViewInit（）{
console.log（this.data）；
console.log（this.labels）；
this.chart=新图表（this.chartRef.nativeElement{
类型：'bar'，
数据：{
标签：这个标签，
数据集：[{
标签：“标签”，
数据：这个数据，
背景颜色：“rgb（0,0,255）”，
边框宽度：1
}]
},
选项：{
比例：{
雅克斯：[
{
滴答声：{
贝吉纳泽罗：是的
}
}
]
}
}
});
此值为0.count；
this.interval=setInterval（this.loadData.bind（this），5000）；
}
loadData（）{
如果（this.count>10）{
返回clearInterval（this.interval）；
}
const{data，labels}=this.dataService.getData（）；
log（“数据加载”）；
log（this.chart.data.labels）；
console.log（this.chart.data.datasets[0].data）；
这个.chart.data.labels.concat（标签）；
forEach（ds=>ds.data.concat（data））；
这个.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端点连接数据之前，我创建了一个测试，其中，每个请求都将返回较新的数据，我必须将其附加到现有图表中。这里给出的代码有什么问题，为什么图表没有更新？

该方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组

因此，您应该更改

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();
}

---

谢谢它解决了我的问题。我有一种错误的印象，即当以我在代码中的方式调用concat时，它会将数据添加到现有数组的末尾。你建议的编辑非常有效。谢谢！很高兴我能帮忙。