如何在Chart.js上使用Angularfire2中的列表

时间:2019-02-08 14:32:49

标签: angular chart.js

我正在使用angular2创建网站,并使用Chartjs可视化Firebase中的数据。但是当我想使用从Firebase订阅到chartjs的数据时,我陷入了困境。

这是我的家。

export class HomePage {

  items : Observable<any[]>; 
  dataplot: Arraydata[] = [1,2,3]; // i use this for manually populate my  
                                   // chartjs and its work
  constructor(public navCtrl: NavController,public db:AngularFireDatabase) {
    this.getData();
  }


public getData(){
    let myitem = [];
    this.db.list('/Flow').valueChanges().subscribe( data => {

      myitem = [];
      data.forEach(element => {
        myitem.push(element)
      });

       this.dataplot = myitem;  // i want every time my db updates it update 
                                // the chartjs too, but now its not even apply 
                                // the subscribed data from firebase to chartjs

    },(err)=>{
       console.log("probleme : ", err)
    })
  }

public lineChartData:Array<any> = [    
    { data: this.dataplot } 
];

这是我的home.html

<canvas baseChart width="400" height="200"
                  [datasets]="lineChartData"></canvas>

即使数据库记录已更新,我也希望将Firebase的数据应用于chartjs,但现在却没有发生,只有数组中的手动数据(我初始化的)适用于图表,您才能给我建议或指示怎么做 ?我是打字稿的初学者。感谢您的帮助。

0 个答案:

没有答案