如何从api拆分数据以获取图表

Question

我在拆分从本地api获取的数据并将其显示在图表上时遇到问题。

我已完成此代码以从api获取数据

this.api.getPerformancePie(username, password).subscribe(Post=>{
        console.log(Post);

for(let Data of Post){
            console.log(Data.Status);
            const series = Data['Status'];

            this.doughnutChart= new Chart(this.doughnutCanvas.nativeElement, {
              type: "doughnut",
              data:{
                labels: [series],
                datasets: [
                  {
                    label: 'Completed',
                    data: [Data.Count],
                  },
                ]
              }
            })

          }

并且此代码在我的.html内部

<ion-card-header>
    <ion-card-title>Overall Schedule Performance</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    <canvas #doughnutCanvas></canvas>
  </ion-card-content>
</ion-card>

甜甜圈图上的输出应该有5个系列。但我只有1个系列，因此没有请愿书包括另外4个系列。我得到的输出如下

我希望任何人都可以展示并教我正确的数据显示方式。同样在下面，我附加了应该显示的数据，但没有显示

谢谢你！

Answer 1

您需要从响应中提取标签和数据。您可以删除for循环并使用map()：

map()

注意

series = this.Post.map(item => Number(item.Count));
labels = this.Post.map(item => item.Status);

的Number强制转换。因为来自API的响应是字符串类型，并且图表仅接受数据作为数字数组，所以它是必需的。

此外，由于它是使用item.Count属性定义的，因此您无需在label: 'Completed'内部定义datasets属性。尝试以下]]

labels
工作示例：this.api.getPerformancePie(username, password).subscribe( Post => {
  const series = Post.map(item => Number(item.Count));
  const labels = Post.map(item => item.Status);

  this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
    type: 'doughnut',
    data: {
      labels: labels,
      datasets: [
        { 
          data: series,
          backgroundColor: ['red', 'blue', 'green', 'yellow', 'turquoise']
        },
      ]
    }
  });
}

Answer 2

您的所有代码都在Stackblitz循环内，并执行了五次。因此，正在创建和销毁四个图表，仅显示第五个图表。