获取数据以反应本机胜利图表
获取数据以反应本机胜利图表
提问于 2020-10-14 00:39:43
我设法创建了一个同时包含键(服务名称)和值(每个服务的计数器)的对象。我不明白如何将数据正确地提取到图形中，这意味着X轴将包含键(服务名称)，Y轴将包含值(计数器)。
创建对象的代码：
const servicesCounter = services.reduce((counterObj, service) => { //Reduce => reduce the array to a single value, then count it.
if (counterObj.hasOwnProperty(service)) {
counterObj[service] += 1;
return counterObj;
}
return {
...counterObj,
[service]: 1
};
}, {});控制台日志：
Service Counter => Object {
"clean": 4,
"haircut": 3,
"wash": 1,
}胜利派：
data={[
{ x: "One" /*Here i need to present the key(service name) */ , y: 2 /*Here i need to present the value(counter)*/},
{ x: "Two", y: 4 },
{ x: "Three", y: 3 }
]}Firestore查询以获取服务名称：
useEffect(() => { //Query to get the services from database and count them to later use.
firebase
.firestore()
.collection("users")
.doc(uid)
.collection("confirmed-appointments").get().then((querySnapshot) => {
let arrayofServices = [];
querySnapshot.forEach((doc) => {
arrayofServices.push(doc.data().serviceType)
})
//console.log("Array of services ", arrayofServices);
setServices(arrayofServices);
})
}, [])有什么能让我的生活更轻松的建议吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-14 00:52:28
您可以使用object.entries遍历属性，为图表创建数组并在图表中使用它。您可以运行下面的代码片段。
const data = {
"clean": 4,
"haircut": 3,
"wash": 1,
};
const arr = new Array();
for (const [key, value] of Object.entries(data)) {
arr.push({x:key,y:value});
}
console.log(arr)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64339521
复制相关文章
相似问题
腾讯云开发者
