javascript - 通过Chart JS使用API​​中的数据

我正在从api获取数据，然后使用.map()将其一部分重新格式化为数组，我能够成功做到这一点，但是当需要将其作为数据工作传递到Chart JS时。我可以传递普通的，硬编码的数组，但不能传递我自己的数据...

我尝试使用Angular指令(NG2-Charts)来帮助解决可能是问题所在，但这也不起作用...

Component.ts:
...其他变量和东西在这里...

getStockData() {
    this.stocksService.getStockData()
      .subscribe(
        (response) => {
          for(var i = 0; i < response.length; i++) {
            this.stockOpen.push(response[i]['open']);
          }
          console.log('after loop: ', this.stockOpen);
        },
        (error) => console.error(error)
      );
      console.log('real: ', this.stockOpen);
      console.log('test: ', this.testData);
  }

  // Chart JS version
  buildStockChart() {
    var ctx = document.querySelector("#chart");
    this.chart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: [1,2,3,4,5],
        datasets: [
          {
            data: this.stockOpen,
            borderColor: "#3cba9f",
            fill: false
          }
        ]
      },
      options: {
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            display: true
          }],
          yAxes: [{
            display: true
          }],
        }
      }
    });
  }

  // NG2-Charts version
  public lineChartData:Array<any> = [
    {data: this.testData},
  ];
  public lineChartLabels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  public lineChartOptions:any = {
    responsive: true
  };

console.log()的结果:

最佳答案

您什么时候调用buildStockChart()方法？

您应该在for循环中的for循环之后立即调用它，并将其传递给subscription方法，因为那是this.stockOpen填充的那一刻(在那一刻，您将在控制台中看到它为空)。