如何在ChartJS图表中绘制数据呈异步

Question

我有一个firebase数据库，我使用angularfire2读取数据，将它们解析为数组，然后将其传递给用户，在此中应将其绘制在Chartjs Chartjs Chart

中。

到目前为止，我确实有一项返回承诺的服务，如果解决的话，它将返回数组。我尝试了设置数据的不同方法。

服务功能

getChart()
  {
    let promise = new Promise((resolve, reject) => {
      let dates: string[] = [];
      let values: number[] = [];
      let response: any = [];
      let res: Observable<BodyFat[]> = this.db.list(this.BASE_PATH, ref => ref.orderByChild(this.DATE).limitToLast(40)).snapshotChanges()
    .pipe(map(items => {
      return items.map(item => {
        let bodyfat = new BodyFat;
        bodyfat.id = item.payload.key;
        bodyfat.date = new Date(item.payload.child(this.DATE).val());
        bodyfat.fat = item.payload.child(this.FAT).val();
        return bodyfat;
      })
    }));
    let i: number = 0;
    res.subscribe(data => {
      data.forEach(element => {
        i++;
        var shortDate = moment(element.date).format('DD.MM.YYYY');
        if(dates.indexOf(shortDate) === -1)
        {
          dates.push(shortDate);
          values.push(element.fat);
        }
        if(i === data.length-1)
        {
          response = {...}
        resolve(response);
        }
      });
    });
    });
    return promise;
  }

方法调用看起来像

var bodyFatChartInstance = new Chart(this.bodyfatRef.nativeElement);
this.bodyfatService.getChart().then(function(data) {
  console.log(data);
  document.getElementById('bodyFatChart').innerHTML = data.toString();
});
this.bodyFat = bodyFatChartInstance;

如果Arry同步返回，则绘制图表很好，返回的数组看起来还不错，但是图表绘制不正常。

到目前为止，控制台向我展示了不同的错误，这取决于我如何尝试设置数据。目前，我得到以下一个

core.js:1673 ERROR Error: Uncaught (in promise): TypeError: Cannot set property 'innerHTML' of null
TypeError: Cannot set property 'innerHTML' of null

Answer 1

经过大量实验和阅读，我想知道，我不知道它是最好的还是正确的，但它是在起作用。

服务很好，呼叫看起来像

    var bodyFatChartInstance = new Chart(this.bodyfatRef.nativeElement, this.bodyfatService.getChartConfig());
    this.bodyfatService.getChart().then(function(data)
    {
      console.log(data);
      data["data"]["datasets"][0]["data"].forEach(element => {
        console.log(element);
        bodyFatChartInstance.data.datasets[0].data.push(element);
      });
      data["data"]["labels"].forEach(element => {
       bodyFatChartInstance.data.labels.push(element); 
      });
      bodyFatChartInstance.update();
    });