Mehrliniendiagramm in React

Question

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.

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