通过API将数据与Chart JS一起使用

Question

我正在从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（）的结果：

Answer 1

我在角度图表JS上也遇到同样的问题，因此我不得不使用另一个图表。 我现在正在使用角度2图表js。

我认为这里的问题是API提取数据的延迟，CHART组件已经在html视图上呈现，但是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

Answer 2

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

您应该在for循环中的for循环之后立即调用它，并将其传递给订阅方法，因为这是填充this.stockOpen的那一刻（在那之前，它在控制台中将为空）

Answer 3

作为@Joseph Agbing，我无法使其与angular 7一起使用。我现在仅使用chart.js

npm install chart.js --save

with into my someChart.component.html

<div style="display: block"><!--Mandatory div including chart--> <canvas id="canvas">{{chart}}</canvas> </div>

进入我的someChart.component.ts

从我的httpClient.post(...).subscribe(lData => (setChartDataFromEntities(lDataProcessed), ...)叫来

import { Chart } from 'chart.js';

export class someClass {

/**
* 
* @param aDate 
* @param aChargeUnitArray 
*/
setChartDataFromEntities( aDate: Date, aChargeUnitArray: ChargeUnit[] ){
    console.debug('setChartDataFromEntities->', aChargeUnitArray)
    let lChartDataArray = []
    let lChartDataLineDataArray: Array<Number> = []
    let lChartLabelsArray: string[] = []
    let l_s: string
    aChargeUnitArray.forEach(element => {
        lChartDataLineDataArray.push(element.charge)
        lChartLabelsArray.push(MiscHelper.dateTimeHMSForChart(element.timestamp))
    });
    lChartDataArray.push(
        {
            data: lChartDataLineDataArray,
            label: MiscHelper.dateForGui(aDate),
        }
    )

    this.chart = new Chart('canvas', {
    type: 'line',
    data: {
        labels: lChartLabelsArray,
        datasets: lChartDataArray
    },
    options: {
        legend: {
            display: false
        },
        scales: {
        xAxes: [{
            display: true
        }],
        yAxes: [{
            display: true
        }],
        }
    }
    });    

    this.statusMessage = 'Chart loaded'
}

希望它对我的帮助远超过我浪费它尝试的那一天...