Question

我有一个Firebase数据库，我使用angularfire2读取了数据，将它们解析为一个数组，然后将其传递回用户，然后应将该数据绘制在chartjs图表中

到目前为止，我确实有一个返回诺言的服务，如果解决了，它将返回一个数组。我尝试了各种设置数据的方法。

服务功能

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();
    });

如何在Chart.js图表中绘制即将异步的数据

1 个答案:

如何在Chart.js图表​​中绘制即将异步的数据

1 个答案:

如何在Chart.js图表中绘制即将异步的数据