recharts怎么画两条独立的线答案

【问题标题】：How to draw two independent lines with rechartsrecharts怎么画两条独立的线
【发布时间】：2022-11-16 22:02:33
【问题描述】：

这是我的数据

const DATA = [

 {
    name: '0',
    data: [
      {x: "07/16/20 01:50", y: "0.397"},
      {x: "07/16/20 02:51", y: "0.480"},
      {x: "07/16/20 02:52", y: "0.416"},
      {x: "07/16/20 02:53", y: "0.396"},
      {x: "07/16/20 02:54", y: "0.418"},
      {x: "07/16/20 02:55", y: "0.390"}
    ]
  },
  {
    name: '1',
    data: [
      {x: "07/16/20 04:54", y: "0.384"},
      {x: "07/16/20 05:57", y: "0.432"}
    ],
  }

]

我试图绘制这些点但失败了。

【问题讨论】：

标签： reactjs recharts

【解决方案1】：

在你的数据结构中，你只需要有一般的数据对象数组。在这里，您正在尝试拥有子数据数组，这可能是图表无法显示的原因。

我假设你想要一个简单的折线图，所以调整你的数据数组，它可能会导致：

const customData = [
  {x: "07/16/20 01:50", y: "0.397"},
  {x: "07/16/20 02:51", y: "0.480"},
  {x: "07/16/20 02:52", y: "0.416"},
  {x: "07/16/20 02:53", y: "0.396"},
  {x: "07/16/20 02:54", y: "0.418"},
  {x: "07/16/20 02:55", y: "0.390"},
  {x: "07/16/20 04:54", y2: "0.384"},
  {x: "07/16/20 05:57", y2: "0.432"}
]

其中x 是在 XAxis 上使用的标签，y 是数据结构中name: '0' 的数据，y2 是name: '1' 的数据。

结果图在代码中看起来像这样，其中有两条不同的线；一个用于 y1 值，另一个用于 y2 值。

export default function App() {
  return (
    <LineChart
      width={500}
      height={300}
      data={customData}
    >
      <XAxis dataKey="x" />
      <YAxis />
      <Line
        type="monotone"
        dataKey="y"
        stroke="#8884d8"
        activeDot={{ r: 8 }}
      />
      <Line
        type="monotone"
        dataKey="y2"
        stroke="#8884d8"
        activeDot={{ r: 8 }}
      />
    </LineChart>
  );
}

【讨论】：