[javascript] Recharts를 사용하여 다중 축을 그리는 방법은 무엇인가요?

01 Dec 2023

javascript

다중 축을 그리는 방법은 다음과 같습니다.

Recharts 설치하기
먼저 Recharts를 설치해야합니다. 다음 명령어를 사용하여 설치할 수 있습니다.

npm install recharts

Recharts 추가하기
다음과 같이 Recharts를 가져옵니다.

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

데이터 설정하기
다중 축을 그리기 위해 필요한 데이터를 설정합니다. 데이터는 배열 형태로 제공되어야합니다.

const data = [
  { name: 'A', value1: 4000, value2: 2400 },
  { name: 'B', value1: 3000, value2: 1398 },
  { name: 'C', value1: 2000, value2: 9800 },
  { name: 'D', value1: 2780, value2: 3908 },
  { name: 'E', value1: 1890, value2: 4800 },
  { name: 'F', value1: 2390, value2: 3800 },
  { name: 'G', value1: 3490, value2: 4300 },
];

차트 생성하기
LineChart 컴포넌트를 생성하고, 그 안에 XAxis, YAxis, CartesianGrid, Line 컴포넌트를 추가합니다. 다음과 같이 작성합니다.

<LineChart width={500} height={300} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis yAxisId="left" />
  <YAxis yAxisId="right" orientation="right" />
  <Tooltip />
  <Legend />
  <Line type="monotone" dataKey="value1" stroke="#8884d8" yAxisId="left" />
  <Line type="monotone" dataKey="value2" stroke="#82ca9d" yAxisId="right" />
</LineChart>

출력 확인하기
위에서 작성한 코드를 사용하여 다중 축 차트를 그립니다.

ReactDOM.render(
  <LineChartDemo />,
  document.getElementById('root')
);

위의 예시를 참고하여, Recharts를 사용하여 다중 축을 그리는 방법을 알 수 있습니다. Recharts 예시와 문서를 참고해보면 더 많은 기능과 사용법을 확인할 수 있습니다.

참고 링크:

Recharts: https://recharts.org
Recharts 예시: https://recharts.org/en-US/examples