Firebase 为什么不'；我的数据点是否放置在图表中的相应位置？_Firebase_Vue.js_Google Cloud Firestore_Chart.js_Nuxt.js

Firebase 为什么不'；我的数据点是否放置在图表中的相应位置？

firebase vue.js google-cloud-firestore chart.js

Firebase 为什么不'；我的数据点是否放置在图表中的相应位置？,firebase,vue.js,google-cloud-firestore,chart.js,nuxt.js,Firebase,Vue.js,Google Cloud Firestore,Chart.js,Nuxt.js,我有一个Nuxt组件，它使用chart.js加载图表，填充了Firestore数据库中的数据。数据点在我的图表底部以一条平线的形式加载。但是，数据在悬停时具有不同的值范围如何获得要在正确位置渲染的数据点以生成实际图形我尝试在检索Firestore数据后使用loaded变量加载图表。我最终得到了完全相同的问题在将数据推送到数组之前，我尝试添加一些静态权重数组数据。这样做时，它会准确地显示这些点，但其余的点平放在底部（悬停时仍显示有效的数据点值）从“@/plugins/firebase

我有一个Nuxt组件，它使用

chart.js

加载图表，填充了Firestore数据库中的数据。数据点在我的图表底部以一条平线的形式加载。但是，数据在悬停时具有不同的值范围

如何获得要在正确位置渲染的数据点以生成实际图形

我尝试在检索Firestore数据后使用

loaded

变量加载图表。我最终得到了完全相同的问题

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


从“@/plugins/firebase”导入{firebase，db}
从“Chart.js”导入图表
常量颜色=['#3AC'、'#D91D63'、'#5F6982'、'#F4B651'、'#3F4952']
导出默认值{
数据（）{
返回{
劳德：错，
权重数据：[]，
}
},
异步装入（）{
//从firebase检索重量数据
这个文件名为getWeightData（）
const ctx=此。$refs.chart
常量图表=新图表（ctx{
键入：“行”，
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”]，
数据集：[{
data:this.weightData，
背景颜色：颜色[0]，
边框颜色：颜色[0]，
边框宽度：1，
填充：假，
标签：“重量”，
回答：对
}]
},
选项：{
图例：{
usePointStyle:true
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的，
步长：10
}
}]
},
工具提示：{
回调：{
后体（工具提示、数据集）{
让数据='goal:goal here'
返回数据
}
}
}
}
})
},
方法：{
getWeightData（）{
firebase.auth（）.onAuthStateChanged（异步用户=>{
如果（用户）{
const data=await db.collection（'users'）.doc（user.uid）.collection（'weight'）.get（）
.然后（querySnapshot=>{
如果（！querySnapshot.empty）{
querySnapshot.forEach（doc=>{
这个.weightData.push（doc.data（）.weight）
})
}
})
}
})
this.loaded=true
}
}
}

我需要一个带有

weightData

数组中数据点的线图。我得到的只是一条在工具提示中具有不同值的平线

此外，图表的范围是0到1，即使

weightData

值最多增加200。

getWeightData（）

异步填充

weightData

，因此在继续设置图表之前，您必须等待函数调用

首先，将

getWeightData（）

包装在

Promise

1中️⃣这样您就可以返回获取的权重数据2️⃣（而不是在

承诺

中设置

此.weightData

）：

方法：{
getWeightData（）{
返回新承诺（（解决，拒绝）=>{/*1）*/
firebase.auth（）.onAuthStateChanged（用户=>{
如果（用户）{
db.collection（'用户'）
.doc（user.uid）
.收集（重量）
.get（）
.然后（querySnapshot=>{
常量权重数据=[]
如果（！querySnapshot.empty）{
querySnapshot.forEach（doc=>{
weightData.push（doc.data（）.weight）
})
}
解析（权重数据）/*2*/
})
.捕获（拒绝）
}否则{
拒绝
}
})
})
}
}

然后在

mounted（）

中，将等待的

getWeightData（）

结果存储在

this.weightData

3中️⃣:

async-mounted（）{
this.weightData=等待此.getWeightData（）/*3*/
/*现在，用'this.weightData'设置图表*/
}

getWeightData（）