Chart.js和Angular 8-从*ngfor动态更新Chart.js标签和数据

import { Component, OnInit } from '@angular/core';
import * as Chart from 'chart.js';

@Component({
  selector: 'app-chart',
  template: '<canvas id="myChart"></canvas>',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {
  chart: any;

  ngOnInit() {
    const ctx = document.getElementById('myChart');
    this.chart = new Chart(ctx, {
      // 配置图表类型、数据等
    });
  }
}

data = [10, 20, 30, 40, 50];

<canvas id="myChart"></canvas>
<div *ngFor="let item of data">
  <span>{{ item }}</span>
</div>

import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import * as Chart from 'chart.js';

@Component({
  selector: 'app-chart',
  template: '<canvas id="myChart"></canvas>',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit, OnChanges {
  @Input() data: number[];

  chart: any;

  ngOnInit() {
    const ctx = document.getElementById('myChart');
    this.chart = new Chart(ctx, {
      // 配置图表类型、数据等
    });
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.data) {
      this.updateChart();
    }
  }

  updateChart() {
    // 更新图表数据
    this.chart.data.datasets[0].data = this.data;
    this.chart.update();
  }
}