[javascript] Recharts에서 파이 그래프를 그리는 방법은 무엇인가요?

01 Dec 2023

javascript

먼저, Recharts를 프로젝트에 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.

npm install recharts

설치가 완료되면, React 컴포넌트에서 Recharts를 import할 수 있습니다.

import { PieChart, Pie, Cell } from 'recharts';

다음으로, 데이터를 준비해야 합니다. 파이 그래프는 각 범주의 값을 나타내는 데이터가 필요합니다. 예를 들어, 다음과 같이 데이터를 정의할 수 있습니다.

const data = [
  { name: 'A', value: 40 },
  { name: 'B', value: 30 },
  { name: 'C', value: 20 },
  { name: 'D', value: 10 },
];

이제 파이 차트를 만들 준비가 되었습니다. Recharts의 PieChart 컴포넌트를 사용하고, Pie 컴포넌트를 이용해 실제 파이를 그릴 수 있습니다. 각 범주마다 색상을 지정하기 위해 Cell 컴포넌트도 사용할 수 있습니다.

const CustomPieChart = () => {
  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

  return (
    <PieChart width={400} height={400}>
      <Pie
        data={data}
        cx="50%"
        cy="50%"
        innerRadius={60}
        outerRadius={80}
        fill="#8884d8"
        label
      >
        {data.map((entry, index) => (
          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
        ))}
      </Pie>
    </PieChart>
  );
};

export default CustomPieChart;

이제 CustomPieChart를 원하는 곳에서 사용하여 파이 그래프를 보여줄 수 있습니다.

import CustomPieChart from './CustomPieChart';

const App = () => {
  return (
    <div>
      <h1>Pie Chart Example</h1>
      <CustomPieChart />
    </div>
  );
};

export default App;

위 예제에서는 각 범주마다 색상을 지정하기 위해 COLORS 배열을 사용하였습니다. 필요에 따라서 이를 수정하거나, 다른 커스텀 설정을 추가할 수 있습니다.

이제 Recharts를 사용하여 파이 그래프를 그릴 준비가 되었습니다. 문서에서 제공하는 다양한 플롯 유형과 방법을 참고하여 원하는 형태의 그래프를 만들어보세요!