[javascript] Recharts에서 다른 차트 유형을 여러 개 사용하고 하나의 컴포넌트로 표시하는 방법은 무엇인가요?

01 Dec 2023

javascript

먼저, Recharts에서 다른 차트 유형을 사용하기 위해서는 <LineChart>, <BarChart>, <AreaChart>와 같은 차트 컴포넌트를 사용해야 합니다. 예를 들어, 선 그래프와 막대 그래프를 함께 표시하려면 다음과 같이 할 수 있습니다.

import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
import { data } from './data'; // 차트에 표시할 데이터

const ChartComponent = () => {
  return (
    <div>
      <LineChart width={400} height={300} data={data}>
        <XAxis dataKey="name" />
        <YAxis />
        <CartesianGrid stroke="#ccc" />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey="value" stroke="#8884d8" />
      </LineChart>
      <BarChart width={400} height={300} data={data}>
        <XAxis dataKey="name" />
        <YAxis />
        <CartesianGrid stroke="#ccc" />
        <Tooltip />
        <Legend />
        <Bar dataKey="value" fill="#8884d8" />
      </BarChart>
    </div>
  );
};

export default ChartComponent;

위 코드에서는 선 그래프와 막대 그래프를 하나의 컴포넌트 내부에 함께 렌더링하고 있습니다. LineChart 및 BarChart 컴포넌트에는 데이터를 전달하고, 각각의 Line 및 Bar 컴포넌트를 사용하여 그래프 선 및 막대를 생성하고 스타일을 지정할 수 있습니다.

데이터는 data 변수에 정의되어 있다고 가정했습니다. 실제로 데이터를 가져오거나 생성하는 방법은 프로젝트나 요구 사항에 따라 다를 수 있습니다.

이제 위의 ChartComponent를 다른 컴포넌트에서 사용하여 여러 차트 유형을 한 번에 표시할 수 있습니다.

import ChartComponent from './ChartComponent';

const App = () => {
  return (
    <div>
      <h1>다양한 차트 유형을 사용한 예시</h1>
      <ChartComponent />
    </div>
  );
};

export default App;

위의 예시에서는 ChartComponent를 App 컴포넌트에 렌더링하여 단일 페이지나 대시보드에서 다양한 차트 유형을 함께 사용할 수 있습니다.

이제 Recharts를 사용하여 다른 차트 유형을 여러 개 사용하고 하나의 컴포넌트로 표시하는 방법을 알게 되었습니다. 문서와 예시 코드에서 제공하는 다른 차트 유형 및 프로퍼티에 대한 자세한 정보는 Recharts 공식 문서를 참조하시기 바랍니다.