如何映射具有多个对象的数组并显示在图表上？答案

【问题标题】：How can I map array with multiple objects and display on chart?如何映射具有多个对象的数组并显示在图表上？
【发布时间】：2023-02-10 14:58:20
【问题描述】：

我想显示我从 firestore 数据库收集的数据并将其显示在图表上，使用 React 中的 Rechart。这是我的数据的样子：

当我想在一张图表上显示所有内容时 - 一切正常。但是我想创建那么多单个图表我有多少对象。我的意思是，每次新旅行 = 新图表。

这就是我的代码现在的样子。

将数据保存到数组中


const getData = async () => {
    const data = [];

    const querySnapshot = await getDocs(
      collection(databaseRef, `${cUser}/userinfo/trips`)
    );
    querySnapshot.forEach((doc) => {
      console.log(doc.id, " => ", doc.data().Title);
      data.push({
        Trip: doc.data().Trip,
        Distance: doc.data().Distance,
        Time: doc.data().Time,
        Calories: doc.data().Calories,
      });
    });
    setData(data);
    console.log(data);
  };

此代码生成 2 个不同的图表，可以但没有任何数据。

 {dataToShow.map((item) => {
        return (
          <>
            <BarChart width={600} height={600} data={item}>
              <XAxis dataKey={item.Trip} />
              <YAxis dataKey={item.Distance} />

              <Bar dataKey={item.Calories} barSize={30} fill="#8884d8" />
              <Bar dataKey={item.Time} barSize={30} fill="#fcba03" />
            </BarChart>
          </>
        );
      })}

我的映射有什么问题？

谢谢你的帮助！

【问题讨论】：

标签： javascript reactjs firebase recharts

【解决方案1】：

要显示不同的Bar 元素，您不需要遍历数组的每个项目。

相反，您只需要为每个 Bar 使用 dataKey 属性，您可以在其中指定要用作字符串的数据，如下所示：

// {dataToShow.map((item) => { <-- remove this
return (
  <BarChart width={600} height={600} data={dataToShow}> // update the `data` prop with your data array
    <XAxis dataKey="Trip" />
    <YAxis dataKey="Distance" />

    <Bar dataKey="Calories" barSize={30} fill="#8884d8" />
    <Bar dataKey="Time" barSize={30} fill="#fcba03" />
  </BarChart>
);
// })} <-- to remove

Recharts 将理解您指向的具有相同道具名称（“Trip”等）的数据。

【讨论】：

你好！我知道我不需要在数组的每一项之后循环。但它工作正常，直到我想在 1 个图表上显示数据。但是对于我数组中的每个对象，我只想用这个数组中的特定数据渲染图表！感谢您的任何建议
所以如果我没理解错的话，你想每个项目都有一张图表吗？
是的。数组中每个对象一个图表（行程、距离、卡路里、时间）
问题已解决

【解决方案2】：

你是如何解决问题的？ Pease，提供代码和答案

【讨论】：

Miangel，请不要添加我也是作为答案。它实际上并没有提供问题的答案。如果您有不同但相关的问题，请ask它（如果它有助于提供上下文，请参考此问题）。如果你对这个具体问题感兴趣，你可以upvote它，留下comment，或者一旦你有足够的reputation就开始bounty。