获取数据到 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)

获取数据到 React Native Victory 图表

Fetch data to React Native Victory charts

javascript

svg

react-native

victory-charts