以正确的重新图表格式获取每月条形图视图中的数据
以正确的重新图表格式获取每月条形图视图中的数据
提问于 2022-04-05 00:36:28
我有一些数据如下：
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'}},
]我想要做的是让它的格式，以便我可以可视化它与重新图表。我想要的是这样的：每月图表示例
我已经能够将数据转换成一种格式，在这种格式中，我可以通过这样做来统计所有独特的团队：
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}}
]然后，我可以画出三个不同的条形图(每个队一个)，它们各自的值都在4月份，都在X轴上。
我不知道，我已经干了好几个小时了，我就是想不出该怎么做。
重新图表文档有一个示例，其中有如下数据：
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}
]回答 1
Stack Overflow用户
回答已采纳
发布于 2022-04-05 01:07:23
我会进行如下的数据转换；
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>
);
}它将产生后续的结果；简单条形图
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71745163
复制相关文章
相似问题
腾讯云开发者
