如何从我的数组<number>添加数据到图表js？在Ionic3

Question

我试图将数据从我的数组传递到我的图表，但图表没有呈现这些值。出现数据。

    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,
                  }
              ]
          }

      });

  }


}

我在方法callLoadProducts（）中获取数据，在构造函数中我打印了cosole中的值，它是正确的！但是当我转到图表（标签：this.nomeProdutos，数据：this.quantidadeProdutos）时，没有任何事情发生！

标签：this.nomeProdutos 数据：this.quantidadeProdutos，

Answer 1

在填充标签（this.nomeProdutos）和数据之后，您必须更新图表（通过调用update()函数） this.quantidadeProdutos）数组。

因此，在for循环之后，请致电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);
   })
}
...