我如何 map 陣列與多個對象並顯示在圖表上？

Question

我想顯示我從 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>
          </>
        );
      })}

我的映射有什么問題？

謝謝你的幫助！

Answer 1

要顯示不同的Bar元素，您不需要循環到數組的每個項目。

相反，您只需要使用dataKey per Bar，在其中指定要用作字符串的數據，如下所示：

// {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”等）理解您指向的數據。