Comment ajouter des données au graphique js depuis ma baie <number>? Dans Ionic3

Question

j'essaie de transmettre des données de mon tableau à mon tableau, mais le graphique n'a pas rendu les valeurs. Apparaît avec les données.

import { Component, ViewChild } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { Chart } from 'chart.js'; 
import { ConnectionServiceProvider } from './../../providers/connection-service/connection-service'; 
import { Product } from './../../models/Product'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    @ViewChild('barCanvas') barCanvas; 
    @ViewChild('doughnutCanvas') doughnutCanvas; 
    @ViewChild('lineCanvas') lineCanvas; 

    private quantidadeProdutos: Array<number>; 
    private nomeProdutos: Array<any>; 
    private produtos: Array<Product>; 
    private nome: string; 

    barChart: any; 
    doughnutChart: any; 
    lineChart: any; 

    constructor(public navCtrl: NavController, private connection : ConnectionServiceProvider) { 
    this.nome = ''; 
    this.quantidadeProdutos = []; 
    this.nomeProdutos = []; 
    this.callLoadProducts(); 
    //console.log(this.produtos); 

    //this.getQuantidadeNome(); 

    console.log('---------------------'); 
    console.log(this.quantidadeProdutos); 
    console.log(this.nomeProdutos); 


    } 

    callLoadProducts() { 
    this.connection.loadProducts(this.nome) 
     .then((data: Array<Product>) => { 
     this.produtos = data; 
     console.log(this.produtos); 
     for(let p of this.produtos){ 
      this.quantidadeProdutos.push(p.price); 
      this.nomeProdutos.push(p.label); 
      console.log(p.label); 
     } 
     }, (error) => { 
     console.log("Ocorreu um erro", error); 
     }) 
    } 


    ionViewDidLoad() { 

     this.barChart = new Chart(this.barCanvas.nativeElement, { 

      type: 'bar', 
      data: { 
       labels: this.nomeProdutos,    
       datasets: [{ 
        label: '# of Votes', 
        data: this.quantidadeProdutos, 
        backgroundColor: [ 
         'rgba(255, 99, 132, 0.2)', 
         'rgba(54, 162, 235, 0.2)', 
         'rgba(255, 206, 86, 0.2)', 
         'rgba(75, 192, 192, 0.2)', 
         'rgba(153, 102, 255, 0.2)', 
         'rgba(255, 159, 64, 0.2)' 
        ], 
        borderColor: [ 
         'rgba(255,99,132,1)', 
         'rgba(54, 162, 235, 1)', 
         'rgba(255, 206, 86, 1)', 
         'rgba(75, 192, 192, 1)', 
         'rgba(153, 102, 255, 1)', 
         'rgba(255, 159, 64, 1)' 
        ], 
        borderWidth: 1 
       }] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero:true 
         } 
        }] 
       } 
      } 

     }); 

     this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, { 

      type: 'doughnut', 
      data: { 
       labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
       datasets: [{ 
        label: '# of Votes', 
        data: [12, 19, 3, 5, 2, 3], 
        backgroundColor: [ 
         'rgba(255, 99, 132, 0.2)', 
         'rgba(54, 162, 235, 0.2)', 
         'rgba(255, 206, 86, 0.2)', 
         'rgba(75, 192, 192, 0.2)', 
         'rgba(153, 102, 255, 0.2)', 
         'rgba(255, 159, 64, 0.2)' 
        ], 
        hoverBackgroundColor: [ 
         "#FF6384", 
         "#36A2EB", 
         "#FFCE56", 
         "#FF6384", 
         "#36A2EB", 
         "#FFCE56" 
        ] 
       }] 
      } 

     }); 

     this.lineChart = new Chart(this.lineCanvas.nativeElement, { 

      type: 'line', 
      data: { 
       labels: ["January", "February", "March", "April", "May", "June", "July"], 
       datasets: [ 
        { 
         label: "My First dataset", 
         fill: false, 
         lineTension: 0.1, 
         backgroundColor: "rgba(75,192,192,0.4)", 
         borderColor: "rgba(75,192,192,1)", 
         borderCapStyle: 'butt', 
         borderDash: [], 
         borderDashOffset: 0.0, 
         borderJoinStyle: 'miter', 
         pointBorderColor: "rgba(75,192,192,1)", 
         pointBackgroundColor: "#fff", 
         pointBorderWidth: 1, 
         pointHoverRadius: 5, 
         pointHoverBackgroundColor: "rgba(75,192,192,1)", 
         pointHoverBorderColor: "rgba(220,220,220,1)", 
         pointHoverBorderWidth: 2, 
         pointRadius: 1, 
         pointHitRadius: 10, 
         data: [65, 59, 80, 81, 56, 55, 40], 
         spanGaps: false, 
        } 
       ] 
      } 

     }); 

    } 


} 

Je reçois les données dans la méthode callLoadProducts(), après en constructot i imprimer les valeurs cosole, et il est vrai! Mais quand je passe à la carte (étiquettes: this.nomeProdutos, données: this.quantidadeProdutos,) rien ne se passe!

étiquettes: this.nomeProdutos données: this.quantidadeProdutos,

Answer 1

Vous devez mettre à jour votre carte (en appelant la fonction update()), après avoir rempli les étiquettes (this.nomeProdutos) et les données (this.quantidadeProdutos) tableau.

Ainsi, après la boucle for, appelez this.barChart.update() ..

... 
callLoadProducts() { 
    this.connection.loadProducts(this.nome).then((data: Array<Product>) => { 
     this.produtos = data; 
     console.log(this.produtos); 
     for (let p of this.produtos) { 
     this.quantidadeProdutos.push(p.price); 
     this.nomeProdutos.push(p.label); 
     console.log(p.label); 
     } 
     this.barChart.update(); //<- call this 
    }, (error) => { 
     console.log("Ocorreu um erro", error); 
    }) 
} 
...