0

Estoy haciendo una aplicación web en Angular con un grafico de barras (Chartjs), consumiendo los datos de una API externa. Hasta ahora todo esta perfecto, la api me devuelve los datos en consola perfectamente. Pero ni bien levanto ng serve, me aparece el grafico vacío y no hay ningun error en consola. Este es mi grafico.component.ts

import { Component } from '@angular/core';

import { CovidService } from '../../services/covid.service';
import { Chart } from 'chart.js';

@Component({
  selector: 'app-grafico',
  templateUrl: './grafico.component.html',
  styleUrls: ['./grafico.component.css']
})
export class GraficoComponent {
  chart = [];

  constructor( private covid: CovidService){}

  ngOnInit(){
    this.covid.covidApi().subscribe(res => {
      /*const result = res.location.timelines;
      const {deaths, confirmed, recovered} = result;*/
      const muertes = res.location.timelines.deaths.timeline;
      console.log(muertes);

      this.chart = new Chart ('canvas', {
        type: 'bar',
        data: {
          datasets : {
            labels: Object.keys(muertes),
            data: muertes,
            backgroundColor: 'red',
            fill: false
          },
        },
        options:{
          legend: {
            display: false
          },
          scales: {
            xAxes:[{
              display: true
            }],
            yAxes:[{
              display: true
            }]
          }
        }
      })
      });

  }
}

Este es mi grafico.component.html

<h4>Grafico</h4>
<br>
<div>
    <canvas id= "canvas">{{chart}}</canvas>
</div>

No se donde está mal. Esto es lo que me devuelve en consola, nada más. introducir la descripción de la imagen aquí

9
  • Por lo poco que veo, tu información solo contiene 0, o existe algún valor con mayor a 0? el 10 feb. 2021 a las 21:33
  • También, viendo la documentación tengo entendido que el objeto debe tener coordenadas x/y, es decir algo como lo siguiente data: [{x:'2016-12-25', y:0}] el 10 feb. 2021 a las 21:48
  • Hola @OscarLudick sisi existe un valor mayor a cero al aumentar las fechas
    – VSacudato
    el 10 feb. 2021 a las 22:34
  • Te referis a la propiedad data dentro de datasets??
    – VSacudato
    el 10 feb. 2021 a las 22:36
  • Asi es, la propiedad data debe ir como un array de objetos [{x, y}] el 10 feb. 2021 a las 22:58

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.