问题描述
我在我的 angular 8 项目中使用了 ngx-charts-bar-horizontal。 当我在 ngOninit 函数中加载结果/数据数组时,它工作正常。
但我想通过单击按钮更改现有数据。它将新数据加载到图形中。
<ngx-charts-bar-horizontal
[view]="view"
[scheme]="colorScheme"
[results]="single"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
(select)="onSelect($event)"
(activate)="onActivate($event)"
(deactivate)="onDeactivate($event)"
[legendPosition]="'below'">
</ngx-charts-bar-horizontal>
这在 ngOnInit 中运行良好
single: any = [
{
"name": "API","value": 90
},{
"name": "DB","value": 12
},{
"name": "File","value": 1
},{
"name": "Message/Event","value": 3
},{
"name": "Poll","value": 15
}
];
点击一个按钮就会调用一个 api 来获取新数据并推送到结果数组。
this.dashboardservice.getCapabilitiesData(data).subscribe(response => {
this.single=[];
this.capabilitiesData = response;
if (this.capabilitiesData.muelCapabilityGraph) {
Object.keys(this.capabilitiesData.muelCapabilityGraph).forEach(key => {
var obj = {
"name": key,"value": this.capabilitiesData.muelCapabilityGraph[key]
}
this.single.push(obj);
});
}
this.single=[...this.single];
console.log("single-->"+JSON.stringify(this.single))
});
this.single Has the new data but chart is blank.
我不确定为什么图表没有用新数据更新。请帮忙!
解决方法
我已经从 swimlane-ngxcharts 分叉了一个项目,并添加了一个功能来在按钮点击时添加列/栏(“添加数据”)。请看一看。 stackblitz 上的代码:link