问题描述
我使用的是 3.2.1 版本的 Chart.js 和 3.0.0-beta.9 版本的 ng2-charts。我正在用这个版本升级一个项目。我从模拟数据开始,一切正常:图表按预期显示。
在我开始使用真实数据进行测试之前,我是从后端获取的。轴、标签、图例未更新,图表未显示。
我在这里重现了这个问题: https://stackblitz.com/edit/chart-js-321-ng2-charts-300-beta9-rest?file=src%2Fapp%2Fapp.component.ts
HTML:
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[type]="barChartType">
</canvas>
TS:
public barChartOptions: ChartOptions = {
indexAxis: 'y',responsive: true,scales: {
x: {
min: 0
}
}
};
public barChartLabels: string[] = ['a','b','c','d','e','f','g'];
public barChartType: ChartType = 'bar';
public barChartLegend = true;
public barChartPlugins = [];
public barChartData: ChartDataset[] = [
{
data: [],//comment it out to see that chart loads with mock data below
// data: [65,59,80,81,56,55,40],backgroundColor: 'green',label: 'Series A'
},{
data: [],//comment it out to see that chart loads with mock data below
// data: [28,48,40,19,86,27,90],backgroundColor: 'red',label: 'Series B '
}
];
@ViewChild(BaseChartDirective,{ static: true }) chart: BaseChartDirective;
ngOnInit() {
//comment http out to see that chart loads with mock data above
this.subscription = this.http
.get('https://api.ratesapi.io/api/2020-05-10')
.subscribe(data => {
this.barChartData[0].data = [
data.rates.GBP,data.rates.HKD,data.rates.IDR,data.rates.PLN,data.rates.DKK,data.rates.LVL,data.rates.INR
];
this.barChartData[1].data = [
data.rates.CHF,data.rates.MXN,data.rates.CZK,data.rates.SGD,data.rates.THB,data.rates.BGN,data.rates.MYR
];
this.barChartLabels = ['1','2','3','4','5','6','7'];
this.barChartData[0].label = 'Label1';
this.chart.update();
});
}
这里我使用的是旧版本,一切正常: https://stackblitz.com/edit/chart-js-293-ng2-charts-232-rest?file=src%2Fapp%2Fapp.component.ts
解决方法
https://github.com/valor-software/ng2-charts/issues/1313
代替图表。update() 暂时使用图表。渲染()。
编辑:在 ng2-charts@3.0.0-rc.2 中,此问题已解决。您可以使用 update() 甚至根本不使用 update() 方法。