我在以 json 格式显示从 API 下载的数据时遇到问题。数据在饼图中不显示/刷新,ngx-chart,静态数据运行良好。我已经阅读了有关 ngx-chart 和 Angular 的所有帖子,但我还没有找到解决问题的方法。
ts 代码
public memoryapi
public memoryinfo
public single = [
{
"name": "",
"value": 34,
},
{
"name": "Free Memory",
"value": 8,
}
];
ngOnInit(){
this.getInfo()
}
getInfo() {
let info;
info = this.http.get('request to API')
info.subscribe(listcapacityresponse => {
this.memoryapi = listcapacityresponse.listcapacityresponse.capacity[0]
this.single[0].name = this.memoryapi.name
this.single[0].value = this.memoryapi.percentused
}
)}
view: any[] = [350, 300];
// options
showLegend = false;
colorScheme = {
domain: ['#5AA454', '#A10A28']
};
// pie
showLabels = true;
explodeSlices = true;
doughnut = true;
onSelect(event) {
console.log(event);
}
}
模板文件:
<div *ngIf="single > 0" class="grid-item">
<ngx-charts-pie-chart
[view]="view"
[scheme]="colorScheme"
[results]="single"
[legend]="showLegend"
[explodeSlices]="explodeSlices"
[labels]="showLabels"
[doughnut]="doughnut"
[gradient]="gradient"
(select)="onSelect($event)">
</ngx-charts-pie-chart>
</div>
//API 响应
{"listcapacityresponse":{"count":10,"capacity":[{"type":0,"name":"MEMORY","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityallocated":2952790016,"capacityused":2952790016,"capacitytotal":34359738368,"percentused":"8.59"},{"type":1,"name":"CPU","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityallocated":2500,"capacityused":2500,"capacitytotal":128000,"percentused":"1.95"},{"type":2,"name":"STORAGE","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":0,"capacitytotal":4398046511104,"percentused":"0"},{"type":3,"name":"STORAGE_ALLOCATED","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":138512695596,"capacitytotal":8796093022208,"percentused":"1.57"},{"type":4,"name":"VIRTUAL_NETWORK_PUBLIC_IP","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":3,"capacitytotal":199,"percentused":"1.51"},{"type":5,"name":"PRIVATE_IP","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":6,"capacitytotal":199,"percentused":"3.02"},{"type":6,"name":"SECONDARY_STORAGE","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":0,"capacitytotal":0,"percentused":"0"},{"type":7,"name":"VLAN","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":1,"capacitytotal":101,"percentused":"0.99"},{"type":19,"name":"GPU","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":0,"capacitytotal":0,"percentused":"0"},{"type":90,"name":"CPU_CORE","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityallocated":4,"capacityused":4,"capacitytotal":16,"percentused":"25"}]}}