以正确的 recharts 格式获取月度条形图视图的数据

Question

我有一些数据是这样的：

data = [
{'id': 1, 'fields': {'name': 'name-1', 'team': 'team-1', 'date': '2022-04-01'}},
{'id': 2, 'fields': {'name': 'name-2', 'team': 'team-2', 'date': '2022-04-02'}},
{'id': 3, 'fields': {'name': 'name-3', 'team': 'team-3', 'date': '2022-04-03'}},
{'id': 4, 'fields': {'name': 'name-4', 'team': 'team-1', 'date': '2022-04-02'}},
{'id': 5, 'fields': {'name': 'name-5', 'team': 'team-2', 'date': '2022-04-02'}},

]

我想做的是以格式获取它，以便我可以用重新图表将其可视化。我想要的是这样的： Monthly chart example

我已经能够将数据转换成一种格式，通过执行以下操作我可以计算出所有独特的团队：

  const counts = {};
  data.forEach(function (x) {counts[x.fields['team']] = (counts[x.fields['team']] || 0) + 1;});

这给了我以下格式：

{'team-1': 2, 'team-2': 2, 'team-3': 1}

并且我已经能够通过以下操作获得给定月份的所有项目：

const monthCountArr = new Array(12).fill(0);
data.forEach(({ fields }) => monthCountArr[new Date(fields['date']).getMonth()] += 1);

产生：

[{0: 0, 1: 0, 2: 0: 3: 5, 4: 0, 5: 0, 6: 0, 7: 0, 8: 0, 9: 0, 10: 0, 11: 0}]

但是，现在我不太确定如何解决这个问题的其余部分，所以我可以得到图表来显示给定月份每个团队中有多少人。

我什至不确定我需要什么样的格式？也许是这样的：

data = [
{'month': 'Apr', 'teams': {'team-1': 2, 'team-2': 2, 'team-3': 1}}

]

然后我可以绘制三个不同的条形图（每个团队一个）及其各自的值都在 X 轴上的 4 月份内。

我不知道，我已经处理了好几个小时了，我就是想不出下一步该怎么做。

recharts 文档有一个例子，其中的数据是这样的：

const data = [
  {
    name: 'Page A',
    uv: 4000,
    pv: 2400,
    amt: 2400,
  },
  {
    name: 'Page B',
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: 'Page C',
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: 'Page D',
    uv: 2780,
    pv: 3908,
    amt: 2000,
  },
  {
    name: 'Page E',
    uv: 1890,
    pv: 4800,
    amt: 2181,
  },
  {
    name: 'Page F',
    uv: 2390,
    pv: 3800,
    amt: 2500,
  },
  {
    name: 'Page G',
    uv: 3490,
    pv: 4300,
    amt: 2100,
  },
];

也许我需要这种格式的数据：

data = [
{'month': 'April', 
'team-1': 2,
'team-2': 2,
'team-3': 1}
]

Answer 1

我会按如下方式四处转换数据；

import "./styles.css";
import React from "react";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend
} from "recharts";

const rawData = [
  { id: 1, fields: { name: "name-1", team: "team-1", date: "2022-04-01" } },
  { id: 2, fields: { name: "name-2", team: "team-2", date: "2022-04-02" } },
  { id: 3, fields: { name: "name-3", team: "team-3", date: "2022-04-03" } },
  { id: 4, fields: { name: "name-4", team: "team-1", date: "2022-04-02" } },
  { id: 5, fields: { name: "name-5", team: "team-2", date: "2022-04-02" } }
];


// get unique list of teams in order to tell recharts to understand as a bar
const teams = Array.from(new Set(rawData.map((i) => i.fields.team)));

/*
Shape the data in the following form;
{
  date: '2022-12-22', <- this will be taken as the X axis
  'team-1': 1, <- each team data will be taken as the bar height
  'team-2': 2
}

*/
const data = Object.values(
  rawData.reduce((acc, d) => {
    const {
      fields: { date, team }
    } = d;
    acc[date] = acc[date] || { date };
    acc[date][team] = (acc[date][team] || 0) + 1;
    return acc;
  }, {})
);

export default function App() {
  return (
    <BarChart
      width={500}
      height={300}
      data={data}
      margin={{
        top: 5,
        right: 30,
        left: 20,
        bottom: 5
      }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="date" />
      <YAxis />
      <Tooltip />
      <Legend />
      {teams.map((t) => (
        <Bar dataKey={t} />
      ))}
    </BarChart>
  );
}

会产生如下结果； simple bar chart

以正确的 recharts 格式获取月度条形图视图的数据

Getting data in the correct recharts format for a monthly bar chart view

javascript

recharts