我基本上是在嘗試使用 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 標籤，但沒有幫助。
您可以在 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 }, ];
您可以在 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 }, ];