Почему мои данные не размещаются в соответствующих местах на моем графике?

Question

У меня есть компонент Nuxt, который загружает диаграмму с использованием chart.js, заполненную данными из базы данных Firestore. Точки данных загружаются в виде плоской линии внизу моего графика. Однако данные имеют разные диапазоны значений при наведении.

Как получить точки данных для рендеринга в правильных местах для создания фактического графика?

Я пытался использовать переменную loaded для загрузки диаграммы после извлечения данных из Firestore. Я сталкиваюсь с точно такой же проблемой.

Я пытался добавить некоторые массивы статических данных, прежде чем данные будут добавлены в него. При этом он точно показывал эти точки, но остальные лежали ровно внизу (все еще показывая действительные значения точек данных при наведении).

<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. Все, что я получаю, это плоская линия с разными значениями во всплывающих подсказках.

Кроме того, диапазон диаграммы составляет от 0 до 1, хотя значения weightData доходят до 200.

Answer 1

getWeightData() заполняет weightData асинхронно, поэтому вам придется дождаться вызова функции, прежде чем приступить к настройке диаграммы.

Сначала оберните getWeightData() в Promise 1️⃣, чтобы выможет вернуть извлеченные данные о весе 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.weightData 3️⃣:

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

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