由于Angular ChartJS在更新数据后没有更新图表,因此需要手动调用update()函数来更新图表。具体步骤如下:
1.在HTML模板中定义一个chart对象:
2.在组件.ts文件中,引入ViewChild并绑定chart对象:
import {Component, ViewChild} from '@angular/core'; import {BaseChartDirective } from 'ng2-charts';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { @ViewChild(BaseChartDirective) chart: BaseChartDirective;
...
}
3.在更新数据的方法中,手动调用update()函数来更新图表:
updateChartData(): void { this.chart.chart.update(); }
这样就可以在每次更新数据时更新图表了。