问题描述

我在将 Firestore 数据转换为 chart.js 图表的数组时遇到了困难.

I'm having difficulty converting the Firestore data into an array for the chart.js graph.

从 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 的值?

I'm using the hard-coded values [4, 3, 5, 2, 6, 7] right now as a placeholder for my data points. How would I use the values coming from Firestore instead?

解决方案

正如下面 Ohad 所说:

As mentioned by Ohad below:

let chartData;

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

这将为您提供一个数组，其中每个文档都在其自己的索引中.您可以像访问任何其他对象一样访问单个属性(即 chartData[0].wheelCount).

This gets you an array with each document in it's own index. You can access individual properties like any other object (ie chartData[0].wheelCount).

推荐答案

调用 this.updatesCollection.get() 将异步返回一个 querySnapshot 对象.

Calling this.updatesCollection.get() will asynchronously return a querySnapshot object.

querySnapshot 有一个 docs 属性，它是一个包含零个或多个 documentSnapshot 对象的数组.可以使用 .data() 方法提取其中的数据.

A querySnapshot has a docs property which is an array containing zero or more documentSnapshot objects. The data in these can be extracted with the .data() method.

生成数组的代码如下所示:

The code for producing your array could look like this:

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

这篇关于将 FirestoreCollection 转换为数组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！