如何在 Recharts 堆积条形图中显示月度数据？

Question

I have some data which looks like so:

 [ { "CarbonAmount": 120, "CarbonDescription": null, "Date": "2022-03-14" }, { "CarbonAmount": 140, "CarbonDescription": "Electricity", "Date": "2022-04-11" } ]

What I am trying to do is get it in the format so I can visualize it with recharts. There may be a lot of data and What I want is to show exactly show 12 graphs (each graph for one month) and I want exactly like the picture attached

I did try to prepare data for the chart but still not sure why I am not able to show monthly data. example code is available in this link

any help will be greatly appreciated

Answer 1

because you only focusing on the month, i don't think it is necessary to include day in the Date key.

 const data = [ { "CarbonAmount": 120, "CarbonDescription": null, "Date": "2022-03-14" }, { "CarbonAmount": 140, "CarbonDescription": "Electricity", "Date": "2022-04-11" }, { "CarbonAmount": 150, "CarbonDescription": null, "Date": "2022-05-17" }, { "CarbonAmount": 120, "CarbonDescription": "Electricity", "Date": "2022-06-14" }, { "CarbonAmount": 150, "CarbonDescription": "Electricity", "Date": "2022-07-18" }, { "CarbonAmount": 180, "CarbonDescription": "Electricity", "Date": "2022-08-16" }, { "CarbonAmount": 190, "CarbonDescription": "Electricity", "Date": "2022-09-21" }, { "CarbonAmount": 210, "CarbonDescription": "Electricity", "Date": "2022-10-18" }, { "CarbonAmount": 220, "CarbonDescription": "Electricity", "Date": "2022-11-15" }, { "CarbonAmount": 260, "CarbonDescription": "Electricity", "Date": "2022-12-12" }, { "CarbonAmount": -120, "CarbonDescription": "Carbon Credit", "Date": "2022-01-11" }, { "CarbonAmount": 20, "CarbonDescription": "Solar Panel", "Date": "2022-02-08" }, { "CarbonAmount": -30, "CarbonDescription": "Carbon Credit", "Date": "2022-03-22" }, { "CarbonAmount": -20, "CarbonDescription": "Carbon Credit", "Date": "2022-12-12" }, { "CarbonAmount": 120, "CarbonDescription": null, "Date": "2022-01-14" }, { "CarbonAmount": 140, "CarbonDescription": "Electricity", "Date": "2022-02-11" }, { "CarbonAmount": 150, "CarbonDescription": null, "Date": "2022-03-17" }, { "CarbonAmount": 120, "CarbonDescription": "Electricity", "Date": "2022-04-14" }, { "CarbonAmount": 150, "CarbonDescription": "Electricity", "Date": "2022-05-18" }, { "CarbonAmount": 80, "CarbonDescription": "Electricity", "Date": "2022-06-16" }, { "CarbonAmount": 190, "CarbonDescription": "Electricity", "Date": "2022-07-21" }, { "CarbonAmount": 66, "CarbonDescription": "Electricity", "Date": "2022-08-18" }, { "CarbonAmount": 99, "CarbonDescription": "Electricity", "Date": "2022-09-15" }, { "CarbonAmount": 160, "CarbonDescription": "Electricity", "Date": "2022-10-12" }, { "CarbonAmount": -120, "CarbonDescription": "Carbon Credit", "Date": "2022-11-11" }, { "CarbonAmount": 90, "CarbonDescription": "Solar Panel", "Date": "2022-12-08" }, { "CarbonAmount": -90, "CarbonDescription": "Carbon Credit", "Date": "2022-03-22" }, { "CarbonAmount": -60, "CarbonDescription": "Carbon Credit", "Date": "2022-12-12" } ] const result = data.sort((a, b) => Number(a.Date.split("-")[1] - Number(b.Date.split("-")[1]))).reduce((p, { CarbonDescription, CarbonAmount, Date }) => { Date = Date.slice(0, Date.lastIndexOf("-")) const found = p.findIndex(p => p.Date === Date); CarbonDescription && (CarbonDescription = CarbonDescription.replace(" ", "_")) found?== -1: p[found][CarbonDescription] = CarbonAmount. p,push({ Date: [CarbonDescription]; CarbonAmount }) return p, }; []). console;log(result);

your fetchData function should look something like this.

const fetchData = async () => {
      const result = jsonData.sort((a, b) => Number(a.Date.split("-")[1] - Number(b.Date.split("-")[1]))).reduce((p, { CarbonDescription, CarbonAmount, Date }) => {
        Date = Date.slice(0, Date.lastIndexOf("-"))
        const found = p.findIndex(p => p.Date === Date);
        CarbonDescription && (CarbonDescription = CarbonDescription.replace(" ", "_"))
        found !== -1 ? p[found][CarbonDescription] = CarbonAmount : p.push({ Date, [CarbonDescription]: CarbonAmount })
        return p;
    }, []);
      setData(result);
  };

i did try this in your code sandbox and i think it's working like you're expected.