[javascript] Recharts에서 두 개 이상의 차트를 동시에 표시하는 방법은 무엇인가요?

01 Dec 2023

javascript

Recharts는 <ComposedChart> 컴포넌트를 사용하여 복수의 차트를 동시에 표시할 수 있습니다. <ComposedChart> 컴포넌트는 다른 차트 컴포넌트를 자식 요소로 포함할 수 있습니다.

다음은 두 개의 차트를 동시에 표시하는 예제 코드입니다.

import React from 'react';
import { ComposedChart, Line, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [
  { name: 'A', value1: 100, value2: 200 },
  { name: 'B', value1: 200, value2: 150 },
  { name: 'C', value1: 150, value2: 300 },
  { name: 'D', value1: 170, value2: 220 },
];

const App = () => (
  <ComposedChart width={400} height={300} data={data}>
    <CartesianGrid stroke="#f5f5f5"/>
    <XAxis dataKey="name"/>
    <YAxis/>
    <Tooltip/>
    <Legend/>
    <Bar dataKey="value1" barSize={20} fill="#413ea0"/>
    <Line type="monotone" dataKey="value2" stroke="#ff7300"/>
  </ComposedChart>
);

export default App;

위 코드에서 <ComposedChart> 컴포넌트 내에서 <Bar> 컴포넌트와 <Line> 컴포넌트를 사용하여 두 개의 차트를 조합하고 있습니다. <Bar> 컴포넌트는 막대 그래프를 그리고 <Line> 컴포넌트는 선 그래프를 그립니다.

이 예제 코드는 data 배열에 있는 데이터를 기반으로 차트를 그리고 있습니다. name 필드는 x축에, value1과 value2 필드는 각각 첫 번째와 두 번째 차트의 y축에 매핑됩니다.

이렇게 간단하게 Recharts를 사용하여 두 개 이상의 차트를 동시에 표시할 수 있습니다. Recharts의 다양한 컴포넌트와 설정 옵션을 사용하여 차트를 자유롭게 커스터마이즈할 수 있습니다.