Question

我有一个Nuxt组件，它使用chart.js加载图表，并填充了Firestore数据库中的数据。数据点将以平线的形式加载到图表底部。但是，当鼠标悬停时，数据具有不同的值范围。

如何获取数据点以在正确的位置进行渲染以生成实际的图形？

在尝试恢复Firestore数据后，我尝试使用loaded变量加载图表。我最终遇到了完全相同的问题。

在将数据推送到数据之前，我尝试添加一些静态权重数组数据。这样做时，它可以准确地显示这些点，但其余部分则平放在底部（悬停时仍显示有效的数据点值）。

<template>
    <div id="container">
        <canvas ref="chart"></canvas>
    </div>
</template>

<script>
import { firebase, db } from '@/plugins/firebase'
import Chart from 'chart.js'

const color = ['#3AC', '#D91D63', '#5F6982', '#F4B651', '#3F4952']

export default {
    data() {
        return {
            laoded: false,
            weightData: [],
        }
    },
    async mounted() {
        // retrieve weight data from firebase
        this.getWeightData()

        const ctx = this.$refs.chart

        const chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June'],
                datasets: [{
                    data: this.weightData,
                    backgroundColor: color[0],
                    borderColor: color[0],
                    borderWidth: 1,
                    fill: false,
                    label: 'weight',
                    responsive: true
                }]
            },
            options: {
                legend: {
                    usePointStyle: true
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            stepSize: 10
                        }
                    }]
                },
                tooltips: {
                    callbacks: {
                        afterBody(tooltip, dataset) {
                            let data = 'goal: goal here'
                            return data
                        }
                    }
                }
            }
        })
    },
    methods: {
        getWeightData() {
            firebase.auth().onAuthStateChanged(async user => {
                if (user) {
                    const data = await db.collection('users').doc(user.uid).collection('weight').get()
                    .then(querySnapshot => {
                        if (!querySnapshot.empty) {
                            querySnapshot.forEach(doc => {
                                this.weightData.push(doc.data().weight)
                            })
                        }
                    })
                }
            })

            this.loaded = true
        }
    }
}
</script>

我希望折线图包含weightData数组中的数据点。我得到的只是一条带有不同提示值的平线。

此外，即使weightData值上升到200，图表的范围也是0到1。

Answer 1

getWeightData()异步填充weightData，因此在继续设置图表之前，您必须等待函数调用。

首先，将getWeightData()包裹在Promise1️⃣中，以便您可以返回获取的重量数据2️⃣（而不是在this.weightData中设置Promise）：

methods: {
  getWeightData() {
    return new Promise((resolve, reject) => { /* 1 */
      firebase.auth().onAuthStateChanged(user => {
        if (user) {
          db.collection('users')
            .doc(user.uid)
            .collection('weight')
            .get()
            .then(querySnapshot => {
              const weightData = []

              if (!querySnapshot.empty) {
                querySnapshot.forEach(doc => {
                  weightData.push(doc.data().weight)
                })
              }

              resolve(weightData) /* 2 */
            })
            .catch(reject)
        } else {
          reject()
        }
      })
    })
  }
}

然后在mounted()中，将getWeightData()的等待结果存储在this.weightData3️⃣中：

async mounted() {
  this.weightData = await this.getWeightData() /* 3 */

  /* now, setup chart with `this.weightData` */
}

为什么我的数据点没有放在图表的相应位置？

1 个答案: