Angular 图表isn';t使用响应数据更新(Chart.js 3.2.1,ng2 charts 3.0.0-beta.9)
我正在使用3.2.1版的Chart.js和3.0.0-beta.9版的ng2图表。我正在用这个版本升级一个项目。我从模拟数据开始,一切正常:图表如预期的那样显示出来 在我开始使用真实数据进行测试之前,我是从后端获取数据的。轴、标签、图例未更新,图表也未显示 我在这里重现了这个问题: HTML: 在这里,我使用的是旧版本,一切正常: 代替图表。更新()临时使用图表。渲染()Angular 图表isn';t使用响应数据更新(Chart.js 3.2.1,ng2 charts 3.0.0-beta.9),angular,chart.js,ng2-charts,chart.js3,Angular,Chart.js,Ng2 Charts,Chart.js3,我正在使用3.2.1版的Chart.js和3.0.0-beta.9版的ng2图表。我正在用这个版本升级一个项目。我从模拟数据开始,一切正常:图表如预期的那样显示出来 在我开始使用真实数据进行测试之前,我是从后端获取数据的。轴、标签、图例未更新,图表也未显示 我在这里重现了这个问题: HTML: 在这里,我使用的是旧版本,一切正常: 代替图表。更新()临时使用图表。渲染() 编辑:在ng2中-charts@3.0.0-rc.2这个问题已经解决。您可以使用update()或甚至不使用update
编辑:在ng2中-charts@3.0.0-rc.2这个问题已经解决。您可以使用update()或甚至不使用update()方法。请在问题中以代码块的形式发布相关代码。如果(…什么时候!!)链接失效,这个问题就没用了。拥有StackBlitz非常棒,但需要一些有问题的代码:)
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[type]="barChartType">
</canvas>
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();
});
}