在 Recharts 中绘制来自 JSON 对象的值？

问题描述

我有一个 JSON 输入，列表中的每个项目都有一个评级代码值，如下所示：

data = [
    {
        "route": "route1","rating-code": 2200
    },{
        "route": "route2","rating-code": 2600
    },{
        "route": "route3",{
        "route": "route4",{
        "route": "route5","rating-code": 2600
    }
];

我正在尝试使用 Recharts 制作一个条形图，在 X 轴上标注评级代码，在 Y 轴上标注评级代码的路线数量。我尝试使用 .reduce 来做到这一点，我得到了预期的输出数组。我现在不知道在 Recharts dataKey 字段中放入什么来绘制此图。

我目前的职能：

const newData = data.reduce(function(out,cur) {
        let r = cur['rating-code'];
        out.codes[r] = (out.codes[r] || 0) + 1;
        return out;
        },{'codes':{}});

返回如下内容：

codes: {
    1600: 6,1800: 5,1900: 1,2000: 1,2100: 3,2200: 1,2300: 1,2400: 12,... }

因此，我希望将评级代码作为我的 x 轴，并将与它们对应的数字作为 y 轴。任何帮助将不胜感激！

<BarChart data={newData ? }>
    <XAxis dataKey= ??? />
    <YAxis dataKey = ??? />
    <Tooltip />
    <Legend />
    <Bar dataKey = ??? />
</BarChart>

解决方法

能够通过改变我处理输入路线数据的方式来解决这个问题。

        const newData = data.reduce(
            (acc,el) => {
                acc[el['rating-code']] = (acc[el['rating-code']] || 0) + 1;
                return acc;
            },{}
        );

        const codes = Object.entries(newData)
            .map(([key,value]) => {
                return {ratingCode: key,count: value};
            });

这以适合 Recharts 的格式返回一个数组，如下所示：

[
   {ratingCode: "1600",count: 6},{ratingCode: "1800",count: 5},{ratingCode: "1900",count: 1},{ratingCode: "2000",{ratingCode: "2100",count: 3},etc.
]

最终能够按预期绘制：

<BarChart data={codes}>
    <XAxis dataKey="ratingCode" />
    <YAxis />
    <Tooltip />
    <Bar dataKey = "count" />
</BarChart>