Recharts

Question

我有一组这样的值： array = [0, 0, 1, 2, 454, 3]

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

Answer 1

官方文档指出 (link)：

points

The coordinates of all the points in the line, usually calculated internally.

_FORMAT:
[{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>
);

显然这里遗漏了很多东西，但您可能会遗漏坐标本身，因为您可能是在笛卡尔平面上绘图。坐标将自动计算 - 只需传递值即可。

此处，该行将从您的数据集中 select pv 键，并绘制它们。

摘录自：http://recharts.org/en-US/api/LineChart

Answer 2

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

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/

Answer 3

对于想要按原样使用数据数组但没有数组映射功能的任何人。为 dataKey prop 提供一个函数就是你的答案：


    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>

如果您想提供更多数据，例如 XAxis 刻度名称、工具提示图例，您应该使用 map 函数并添加其他属性。

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

Recharts - pass array of values to Line component

reactjs

points