bugfix> javascript > 投稿

Firestoreデータをchart.jsグラフの配列に変換するのが困難です。

Firestoreからデータを取得する

fetchData(){
    //Get data
    this.updatesCollection = this.afs.collection(pathStats);
    this.updates = this.updatesCollection.valueChanges();
}

チャートを作成する

createChart(){
this.chart = new Chart('canvas', {
  type: 'line',
  data: {
    labels: ['5/18/18', '5/19/18', '5/20/18', '5/21/18', '5/22/18', '5/23/18'],
    datasets: [{
      label: 'Filled',
      backgroundColor: 'gray',
      data: [4, 3, 5, 2, 6, 7],
      fill: true,
    }]
  },
    }
)

ハードコードされた値 [4, 3, 5, 2, 6, 7] を使用しています今、私のデータポイントのプレースホルダーとして。代わりにFirestoreからの値をどのように使用しますか?

解決 

以下のOhadによると:

let chartData;
this.updatesCollection.ref.get().then((querySnapshot) => {
    chartData = querySnapshot.docs.map(doc => doc.data());
}

これにより、各ドキュメントが独自のインデックスにある配列が取得されます。他のオブジェクト( chartData[0].wheelCount など)のように個々のプロパティにアクセスできます )。

回答 1 件
  • this.updatesCollection.get() を呼び出す  非同期で querySnapshot を返します  オブジェクト。

    ひよこ   querySnapshot を持っています  0個以上の docs を含む配列であるプロパティ  オブジェクト。これらのデータは documentSnapshot で抽出できます  方法。

    配列を生成するコードは次のようになります。

    .data()
    
    
    let chartData = this.updates.collection.get() .then(querySnapshot => { chartData = querySnapshot.docs.map(doc => doc.data()) })

あなたの答え