Как разделить данные из API, чтобы получить график - PullRequest
Новая
       10

Как разделить данные из API, чтобы получить график

1 голос
/ 25 марта 2020

У меня возникла проблема с разделением данных, полученных из локального 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 серии. вывод, который я получил, как показано ниже

enter image description here

Я надеюсь, что любой сможет показать и научить меня правильному способу отображения данных. Также ниже я прилагаю данные, которые должны отображаться, но они не отображаются

enter image description here

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 26 марта 2020

Вам необходимо извлечь метки и данные из ответа. Вы можете удалить for l oop и использовать map(): 

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

Обратите внимание на Number приведение для item.Count. Это необходимо, поскольку ответ от API имеет строковый тип, а диаграмма принимает данные только в виде массива чисел.

Также вам не нужно определять 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']
        },
      ]
    }
  });
}

Рабочий пример: Stackblitz

0 голосов
/ 25 марта 2020

Весь ваш код находится внутри for l oop и выполняется пять раз. Итак, четыре диаграммы создаются и уничтожаются, а отображается только пятая.

Переместите код создания вашей диаграммы за пределы for l oop, что-то вроде этого: 

const series = [],
  counts = [];

for (let Data of Post) {
  series.push(Data.Status);
  counts.push(Data.Count);
}

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

Обратите внимание, что я не запускал этот код, поэтому возможна опечатка, но он показывает концепцию того, что вам нужно изменить, чтобы решить проблему. (В следующий раз, пожалуйста, опубликуйте ваши данные в виде текста, , а не снимок экрана. Тогда я мог бы создать рабочий пример здесь.)

...