获取数据到React Native Victory图表

Question

我设法创建了一个同时包含键(服务名称(和值(每个服务的计数器(的对象我不知道如何将数据正确地提取到图形中，这意味着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);
})

}, [])

有什么能让我的生活更轻松的建议吗？？

Answer 1

您可以使用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)