Recharts-将值数组传递给Line组件

Question

我有一个值数组，如下所示：array = [0, 0, 1, 2, 454, 3]

如何将数组传递给Recharts Line组件？值应显示在y轴上，索引应显示在x轴上。

Answer 1

对于任何想要按原样使用数据数组的人，无需数组映射函数。为dataKey道具提供功能是您的答案：

const data= [0, 0, 1, 2, 454, 3];
<LineChart width={500} height={300} data={data}>
<CartesianGrid strokeDasharray="3 3" />
<YAxis dataKey={(v) => v} />
<Line type="monotone" dataKey={v=>v} stroke="#8884d8" />
</LineChart>

如果要提供更多数据，如X轴刻度名称、工具提示图例，则应使用贴图功能并添加其他特性。

Answer 2

官方文档说明(链接(：

点

线中所有点的坐标，通常在内部计算。

_格式：

[{x: 12, y: 12, value: 240}]

要传递您提供的数组，您需要对数组进行一点转换。你可以用

const data = array.map(x => ({pv: x}));
return (
<LineChart data={data}>
<Line type="monotone" dataKey="pv" stroke="#8884d8" />
</LineChart>
);

很明显，这里省略了很多东西，但你可能会忽略坐标本身，因为你可能是在笛卡尔平面上绘制的。坐标将自动计算，只需传递值即可。

在这里，这条线将从数据集中选择pv键，并绘制它们。

代码段源自：http://recharts.org/en-US/api/LineChart

Answer 3

您需要提供一个对象数组作为数据

const array = [0, 0, 1, 2, 454, 3];
const data = array.map((value,index)=>({index,value}))

然后

<LineChart width={600} height={300} data={data}>
<XAxis dataKey="index"/>
<YAxis/>
<Line  dataKey="value" stroke="#8884d8" activeDot={{r: 8}}/>
</LineChart>

演示位置https://jsfiddle.net/mxgkwszq/1/