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 },
];