Carta berbilang baris dalam React

Question

Saya pada asasnya cuba membuat carta mudah menggunakan Recharts dalam React.

Masalah yang saya hadapi ialah saya tidak boleh membuat berbilang baris kerana paksi X berbeza untuk kedua-dua set data.

Contohnya: set1:[{x:1.1,y:2.1},{x:1.2,y:2.2}] dan set2:[{x:1.3,y:3.2},{x:1.4,y: 3.4} ] . Saya tidak tahu mengapa setiap kali saya cuba membuat carta berbilang baris dengan Recharts, paksi X sentiasa sama, dan saya mempunyai garisan dengan paksi Y yang berbeza, tetapi hanya paksi X.

Saya cuba mencipta label X dan Y yang berbeza tetapi ia tidak membantu.

Answer 1

Anda boleh menggunakan berbilang komponen XAxis dalam komponen LineChart dan menetapkan xAxisId yang berbeza untuk setiap komponen.

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