Ich versuche im Grunde, mit Recharts in React ein einfaches Diagramm zu erstellen.
Das Problem, das ich habe, ist, dass ich nicht mehrere Zeilen erstellen kann, weil die X-Achse für beide Datensätze unterschiedlich ist.
Zum Beispiel: set1:[{x:1.1,y:2.1},{x:1.2,y:2.2}] und set2:[{x:1.3,y:3.2},{x:1.4,y:3.4} ] . Ich weiß nicht, warum jedes Mal, wenn ich versuche, mit Recharts ein mehrzeiliges Diagramm zu erstellen, die X-Achse immer dieselbe ist und ich Linien mit unterschiedlichen Y-Achsen habe, aber nur die X-Achse.
Ich habe versucht, verschiedene X- und Y-Beschriftungen zu erstellen, aber es hat nicht geholfen.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
您可以在 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 }, ];