在Angular和Chart.js中,要在更改时重新绘制图表,可以使用ngAfterViewInit
生命周期钩子,并使用Chart.js提供的update()
方法。
首先,确保已经安装了Chart.js和ng2-charts(一个用于将Chart.js集成到Angular中的库)。
然后,创建一个Angular组件,例如ChartComponent
,并使用以下代码示例:
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { Chart } from 'chart.js';
@Component({
selector: 'app-chart',
template: '',
})
export class ChartComponent implements AfterViewInit {
@ViewChild('chartCanvas') chartCanvas: ElementRef;
chart: Chart;
ngAfterViewInit() {
this.chart = new Chart(this.chartCanvas.nativeElement, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)'
}
]
}
});
}
updateChart() {
this.chart.data.labels = ['1', '2', '3', '4', '5', '6', '7'];
this.chart.data.datasets[0].data = [10, 20, 30, 40, 50, 60, 70];
this.chart.update();
}
}
在上面的代码中,ngAfterViewInit
生命周期钩子用于在视图初始化后创建Chart.js图表。updateChart
方法用于更新图表数据,并调用update()
方法重新绘制图表。
最后,在页面中使用ChartComponent
组件,例如:
通过点击"Update Chart"按钮,可以看到图表数据被更新,并且图表会重新绘制。