以角度 2 更新 ng-charts 条形图数据集

Posted 2023-02-19

【中文标题】以角度 2 更新 ng-charts 条形图数据集

【英文标题】：Updating ng-charts barchart datasets in angular 2

【发布时间】：2017-12-01 13:32:52

【问题描述】：

如何从 angular2 更新条形图？我正在尝试在点击时添加新条目到[datasets]="barChartData" 在模板中，图表如下所示：

<canvas baseChart #myChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>

我尝试了以下推荐的方法： 1）直接更改数据集变量 - 克隆数据，更改它然后分配它。这样我可以更改/更新现有数据，但无法向数据集添加新条目。

2) ChangeDetectorRef，我在构造函数中添加了私有参考：ChangeDetectorRef，并在更新时调用了ref.detectChanges()。但没有运气。我也尝试过使用 ApplicationRef。

在这两种情况下，在调试窗口中，我都可以看到 barChartData 使用 ts 文件中的新值进行了更新，但 template(html) 没有更新/刷新。

【参考方案1】：

经过一天的痛苦，我找到了一个可行的解决方案： 首先你必须导入指令：

import BaseChartDirective from 'ng2-charts/ng2-charts'

然后在课堂上参考图表：

@ViewChild(BaseChartDirective)
public chart: BaseChartDirective;

现在您可以使用图表对象访问模板中的图表。然后在您要刷新图表时放置此代码：

this.chart.ngOnChanges( as SimpleChanges);

确保将空对象作为 SimpleChanges 类型传递。只有当参数为空对象时，ngOnChanges 才会再次重绘图表。

请注意，您必须在调用 ngOnChanges 之前克隆并更改对数据集的引用。 就我而言，我这样做是为了刷新图表：`

this.barChartData = clone;
this.chart.datasets = this.barChartData;
this.chart.ngOnChanges( as SimpleChanges);`