Question

如何从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，我将私有ref：ChangeDetectorRef添加到构造函数，并在更新时调用ref.detectChanges()。但没有运气。我也尝试过使用ApplicationRef。

在这两种情况下，在调试窗口中，我可以看到barChartData使用ts文件中的新值更新，但模板（html）未更新/刷新。

Answer 1

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

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

然后在课堂上参考图表：

@ViewChild(BaseChartDirective)
public chart: BaseChartDirective;

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

this.chart.ngOnChanges({} as SimpleChanges);

确保将空对象作为SimpleChanges类型传递。仅当参数为空对象时，ngOnChanges才会重新绘制图表。

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

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

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

1 个答案: