[javascript] Recharts에서 도넛 차트를 그리는 방법은 무엇인가요?

01 Dec 2023

javascript

Recharts 설치하기: 먼저, Recharts를 설치해야 합니다. 다음 명령어를 실행하여 Recharts를 설치합니다:

npm install recharts

Recharts 컴포넌트 import하기: 도넛 차트를 그리기 위해 필요한 Recharts 컴포넌트를 import해야 합니다. 다음과 같이 코드를 작성합니다:

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

도넛 데이터 세팅하기: 도넛 차트에 표시할 데이터를 세팅해야 합니다. 예를 들어, 다음과 같이 데이터를 생성합니다:

const data = [
  { name: 'Apple', value: 500 },
  { name: 'Banana', value: 300 },
  { name: 'Orange', value: 200 },
];

도넛 차트 그리기: Recharts의 PieChart 컴포넌트와 Pie 컴포넌트를 사용하여 도넛 차트를 그립니다. 다음과 같이 코드를 작성합니다:

const DonutChart = () => {
  return (
    <PieChart width={400} height={400}>
      <Pie
        data={data}
        cx={200}
        cy={200}
        innerRadius={60}
        outerRadius={80}
        fill="#8884d8"
        dataKey="value"
      />
    </PieChart>
  );
}

export default DonutChart;

도넛 차트 컴포넌트 사용하기: 위에서 작성한 도넛 차트 컴포넌트를 다른 컴포넌트에서 import하여 사용할 수 있습니다. 예를 들어, 다음과 같이 코드를 작성합니다:

import DonutChart from './DonutChart';

const App = () => {
  return (
    <div>
      <h1>도넛 차트 예제</h1>
      <DonutChart />
    </div>
  );
}

export default App;

위의 방법을 따라하면 Recharts를 사용하여 도넛 차트를 그릴 수 있습니다. 더 많은 설정 및 커스터마이징 옵션은 Recharts 문서를 참조하세요.