React 中的多线图

Question

我基本上是在尝试使用 React 中的 Recharts 制作一个简单的图表。

我遇到的问题是我无法制作多行，因为两个数据集的 X 轴都不同。

例如： set1:[{x:1.1,y:2.1},{x:1.2,y:2.2}] 和 set2 :[{x:1.3,y:3.2},{x:1.4,y: 3.4}]。我不知道为什么每次我尝试用 Recharts 制作多线图时，X 轴总是相同的，并且我有不同 Y 轴的线，但只有 X 轴。

我尝试创建不同的 X 和 Y 标签，但没有帮助。

Answer 1

您可以在 LineChart 组件中使用多个 XAxis 组件，并为每个组件分配不同的 xAxisId。

<LineChart data="{data}">
  <XAxis xAxisId="0" dataKey="x1" />
  <XAxis xAxisId="1" dataKey="x2" />
  <YAxis />
  <Line dataKey="y1" xAxisId="0" />
  <Line dataKey="y2" xAxisId="1" />
</LineChart>


// Data
const data = [
  { x1: 1.1, y1: 2.1, x2: 1.3, y2: 3.2 },
  { x1: 1.2, y1: 2.2, x2: 1.4, y2: 3.4 },
];