javascript - 将来自 API 的数据与 Chart JS 一起使用

Question

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

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

组件.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() 的结果:

Answer 1

我在 Angular 图表 JS 上也有同样的问题，所以我强制使用另一个图表。我现在使用 Angular 2 图表 js。

我认为这里的问题是 API 获取数据的延迟，CHART 组件已经呈现在 html View 上，但 API 服务仍未获取数据。

尝试将此代码添加到您的代码块中。如果 API 服务数据可用，这将处理数据。()=>{this.buildStockChart();}

---

 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);
        },
        ()=>{
        this.buildStockChart();
        }
      );
      console.log('real: ', this.stockOpen);
      console.log('test: ', this.testData);
  }

此图表易于管理动态实例。

希望这张图表对你有用。

https://www.npmjs.com/package/angular2-chartjs