时间戳

首页 > 解决方案 > 使用 ngx-pie-charts 从 API 填充图表数据

angular - 使用 ngx-pie-charts 从 API 填充图表数据

问题描述

我是 Angular 的新手，下面是使用 API 并获取（名称，值）对中的数据以在饼图中填充数据但图表仅显示单个记录的代码，并且我有 X 条记录，我在下面做错了什么代码。先感谢您

  this.service.getsubordintesummary(30).subscribe(res=>
   {
            this.subordinatesummary=res as subordinatesummary[]; 
       for(i=0;i<=this.subordinatesummary.length;i++)
         {
           this.widget7.device=
        [
           {
             name:this.subordinatesummary[0].subordinates[i].Description,
             value:this.subordinatesummary[0].subordinates[i].EmpCount,
           }
       ]
    }
  }


 })

JSON数据：

[
  {
   "total":10,
     "subordinates":
       [
         {"Description":"IT sector","Ecount":1},
         {"Description":"MWS sector","Ecount":3}
       ]
  }
]

标签： angularangular7

解决方案

假设您来自 api 响应的数据就像

this.data:any[]=[
  {
   "total":10,
     "subordinates":
       [
         {"Description":"IT sector","Ecount":1},
         {"Description":"MWS sector","Ecount":3}
       ]
  },
  {
   "total":11,
     "subordinates":
       [
         {"Description":"IT development","Ecount":5},
         {"Description":"Service","Ecount":8}
       ]
  }
]

您需要将迭代功能实现为

let chartData: any[]=[];
this.data.map(subordinate => subordinate.subordinates.map(item => {
  chartData.push({name: item.Description, value: item.Ecount})
  })
)

这里chartData包含 pireChart 数据类型。就像

{
    "name": "Germany",
    "value": 8940000
  },
  {
    "name": "USA",
    "value": 5000000
  },

由于图表只接受这种数据格式。

检查小提琴以获得完整的解决方案。如果您需要更多解释，也请告诉我。

检查小提琴

推荐阅读