用数组反应 Recharts 数据

问题描述

我有一个具有以下结构的数据数组：

0:
  date: '01-12-2020',data: Array(2)
    {name: "plants",count: 5}
    {name: "water",count: 2}
1:
  date: '02-12-2020',count: 1}
    {name: "water",count: 4}
...

我想在 x 轴上显示日期并为每个“名称”类别渲染一条线。在这种情况下有两条线，一条线用于植物，一条线用于水。

我应该格式化这个代码还是我可以直接在 recharts 中使用这个数组？我在后端自己创建数组，所以我也可以在那里格式化它。

我已经尝试过类似的方法，但它不起作用：

<ResponsiveContainer width="100%" height={200}>
                <LineChart data={data}>
                    <Cartesiangrid strokeDasharray="3 3" />
                    <XAxis dataKey="x" />

                    <YAxis />
                    <Tooltip />
                    {data.map((item,i) => (
                        <Line
                            dataKey={data[0].data[0].count}
                            type="monotone"
                            stroke={colors[0]}
                            activeDot={{ r: 8 }}
                        />
                    ))}
                </LineChart>
            </ResponsiveContainer>

解决方法

您的数据需要格式化为：

[{日期：'01-12-2020'， 植物：5 水：4}]

您可以执行以下操作：

   let result = [];
   data.map(entry) => {
   let obj = {date: entry.date}
     entry.data.map((entry1) => {
      obj[entry1.name] = entry1.count;
    });
   result.push(obj)
  })

和你的图表如下（你在 XAxis 上的 dataKey 是假的）

<ResponsiveContainer width="100%" height={200}>
                <LineChart data={data}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="date" />

                    <YAxis />
                    <Tooltip />
                    {data.data.map((item,i) => (
                        <Line
                            dataKey={item.name}
                            type="monotone"
                            stroke={colors[0]}
                            activeDot={{ r: 8 }}
                        />
                    ))}
                </LineChart>
            </ResponsiveContainer>