Как правильно отобразить данные, используя графики ng2 и Angular из API

Question

Здравствуйте, не могли бы вы помочь мне, пожалуйста? Я пытаюсь показать данные с помощью диаграмм ng2 в приложении Angular, я получаю данные из API с Firebase, но он не работает, и я не понимаю, что я делаю неправильно.

Данные, которые я получаю, выглядят так:

{
    "2017": {
        "bebes": 67,
        "hombres": 20,
        "mujeres": 30
    },
    "2018": {
        "bebes": 33,
        "hombres": 10,
        "mujeres": 49
    },
    "2019": {
        "bebes": 45,
        "hombres": 20,
        "mujeres": 34
   }

(я знаю, это ужасно).

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

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class VentasService {

  private url = 'https://dbb-fa0a5.firebaseio.com/data.json';

  constructor(private http: HttpClient) {
  }

  getVentas() {
    return this.http.get(this.url);
  }
}
}

А это компонент с графикой c.

import { Component } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';   
import { VentasService  } from '../../../../services/ventas.service';

@Component({
  selector: 'app-bar-grafic',
  templateUrl: './bar-grafic.component.html',
  styles: []
})
export class BarGraficComponent {
  year_2017: any = []
  year_2018: any = []
  year_2019: any = []

  constructor(private ventas : VentasService){

  this.ventas.getVentas().subscribe( (data : any) =>{
    this.year_2017 = data['2017']
    this.year_2018 = data['2018']
    this.year_2019 = data['2019']
    // testing
    console.log(this.year_2017.mujeres);
  })



  }

  public barChartOptions: ChartOptions = {
    responsive: true,
    // We use these empty structures as placeholders for dynamic theming.
    scales: { xAxes: [{}], yAxes: [{}] },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
      }
    }
  };

  public barChartLabels: Label[] = ['2017', '2018', '2019'];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;


  public barChartData: ChartDataSets[] = [
    { data: [this.year_2019.mujeres, this.year_2018.mujeres, this.year_2017.mujeres], label: 'Mujeres' },
    { data: [this.year_2019.hombres, this.year_2018.hombres, this.year_2017.hombres], label: 'Hombres' },
    { data: [this.year_2019.bebes, this.year_2018.bebes, this.year_2017.bebes], label: 'Bebes' }
  ];

  public refresh(): void {
    this.ventas.getVentas().subscribe( (data : any) =>{
      this.year_2017 = data['2017']
      this.year_2018 = data['2018']
      this.year_2019 = data['2019']
      console.log(this.year_2017.mujeres);

    })
  }
}

Если я попытаюсь напечатать его в консоли, все выглядит хорошо, но график c не не показывают данные

И действительно, я не знаю почему: (

Answer 1

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

Как ваша служба является асинхронной задачей, я использую оператор timer для добавления асинхронного поведения.

Пожалуйста, найдите код ниже:

import { Component, OnInit } from "@angular/core";
import { ChartOptions, ChartType, ChartDataSets } from "chart.js";
import { Label } from "ng2-charts";
import { timer } from "rxjs";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  year_2017: any = [];
  year_2018: any = [];
  year_2019: any = [];

  public barChartData: ChartDataSets[] = [];

  constructor() {
    timer(1000).subscribe((data: any) => {
      this.year_2017 = { mujeres: 10, hombres: 20, bebes: 30 };
      this.year_2018 = { mujeres: 5, hombres: 10, bebes: 15 };
      this.year_2019 = { mujeres: 2, hombres: 4, bebes: 6 };
      // testing
      console.log(this.year_2017.mujeres);

      this.barChartData = [
        {
          data: [
            this.year_2019.mujeres,
            this.year_2018.mujeres,
            this.year_2017.mujeres
          ],
          label: "Mujeres"
        },
        {
          data: [
            this.year_2019.hombres,
            this.year_2018.hombres,
            this.year_2017.hombres
          ],
          label: "Hombres"
        },
        {
          data: [
            this.year_2019.bebes,
            this.year_2018.bebes,
            this.year_2017.bebes
          ],
          label: "Bebes"
        }
      ];
    });
  }

  public barChartOptions: ChartOptions = {
    responsive: true,
    // We use these empty structures as placeholders for dynamic theming.
    scales: { xAxes: [{}], yAxes: [{}] },
    plugins: {
      datalabels: {
        anchor: "end",
        align: "end"
      }
    }
  };

  public barChartLabels: Label[] = ["2017", "2018", "2019"];
  public barChartType: ChartType = "bar";
  public barChartLegend = true;
}