Question

我在以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"}]}}

Answer 1

两年前我发生了同样的问题。这是解决方案。只需将逻辑更改为

  public single =  [];

  ...

  getInfo() {

    let info;
    info = this.http.get('request to API')
    info.subscribe(listcapacityresponse => {

    this.memoryapi = listcapacityresponse.listcapacityresponse.capacity[0]
    this.single = 
     [{
       "name": this.memoryapi.name,
       "value": this.memoryapi.percentused
      },
      {
       "name": "Free Memory",
       "value": 8
      }]

您需要一次初始化数组。您的*ngIf用法是正确的，但对您而言却无用，因为您已经在类定义中定义了single变量。

从API检索数据并显示在饼图中

1 个答案: