如何解析Firebase上valueChanges（）返回的数据（可观察）并绘制到Chart.js

Question

我正在尝试从Firebase实时数据库中检索一些数据，我能够将要检索的数据作图，但是我不知道如何将以Observable形式接收的数据解析到一个列表中我可以在Chart.js或任何其他图表框架上进行绘制。

Here is my datastored.ts module 

<pre>
    import { Component } from '@angular/core';
    import { IonicPage, NavParams, DateTime } from 'ionic-angular';
    import { NavController, Item } from 'ionic-angular';
    import { Observable } from 'rxjs-compat';
    import { AngularFireDatabase } from '@angular/fire/database';

    @IonicPage({
      name: 'DatastoredPage'
    })
    @Component({
      selector: 'page-datastored',
      templateUrl: 'datastored.html',
    })

    export class DatastoredPage {
      myDateStart:string = "2018-10-04"
      myDateEnd:string = "2018-10-30"
      incubator30: Observable<any[]>;  

      constructor(public navCtrl: NavController, public navParams: NavParams, private db:AngularFireDatabase) {

        this.incubator30 = db.list('NeoSilence/Incubator1', ref => ref.orderByChild("d").startAt(this.myDateStart).endAt(this.myDateEnd)).valueChanges();    
      }

      ionViewDidLoad() {
        console.log('ionViewDidLoad DatastoredPage');
        console.log(this.incubator30);
      }  
      getstartByDate() {
        console.log(this.myDateStart);
        console.log("Before the Startdate filter");
        this.incubator30 = this.db.list('NeoSilence/Incubator1', ref => ref.orderByChild("d").startAt(this.myDateStart).endAt(this.myDateEnd)).valueChanges();
        console.log("After the Startdate filter");
        this.incubator30.forEach(element => {
          element.forEach(co => {
            console.log(co.d)        
          })
        });
      }

      getendByDate() {
        console.log(this.myDateEnd);
        console.log("Before the Enddate filter");
        this.incubator30 = this.db.list('NeoSilence/Incubator1', ref => ref.orderByChild("d").startAt(this.myDateStart).endAt(this.myDateEnd)).valueChanges();
        console.log("After the Enddate filter");
        this.incubator30.forEach(element => {
          element.forEach(co => {
            console.log(co.d)
          })
        });
      }  
    }
    </pre>

这是我的HTML代码，可以在其中显示检索到的数据。

    class="bgstyle" *ngFor="let StoredData of incubator30 | async">
    {{StoredData.d | json}} - {{StoredData.t | json}} {{StoredData.f | json}}dBA

如何在datastored.ts模块上将所需的信息（date（d）和measurement（f））读入可以在chart.js或highchart或任何其他图表平台上绘制的变量中。

Answer 1

我能够解决该问题，订阅了我想绘制的变量。其中分别为“ d”和“ f”。

this.incubator30.subscribe((res) => {
        this.date = res.map((value) => { return value.d });
        this.list = res.map((value) => { return value.f      

      })

谢谢。