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

Question

我有一个像这样的值数组:数组 = [0, 0, 1, 2, 454, 3]

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

Answer 1

对于任何想要按原样使用数据数组而不使用数组映射功能的人。为 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 功能并添加其他属性。