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

Question

我无法以 json 的形式显示从 API 下载的数据。饼图中的数据不是displayed/refresh，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 用法是正确的，但在您的情况下没有用，因为您已经在 class 定义中定义了 single 变量。

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

Retrieving data from the API and displaying in a pie chart

angular

ngx-charts