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

01 Dec 2023

javascript

레이더 차트를 그리기 위해서는 Recharts의 RadarChart와 Radar 컴포넌트를 사용해야 합니다. 아래 예제 코드를 통해 간단히 레이더 차트를 그리는 방법을 확인해보세요.

import React from 'react';
import { RadarChart, PolarGrid, PolarAngleAxis, Radar, ResponsiveContainer } from 'recharts';

const data = [
  { subject: 'Math', A: 120, B: 110, fullMark: 150 },
  { subject: 'Science', A: 98, B: 130, fullMark: 150 },
  { subject: 'History', A: 86, B: 130, fullMark: 150 },
  { subject: 'English', A: 99, B: 100, fullMark: 150 },
  { subject: 'Art', A: 85, B: 90, fullMark: 150 },
  { subject: 'Music', A: 65, B: 85, fullMark: 150 },
];

const RadarChartExample = () => {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <RadarChart cx="50%" cy="50%" outerRadius="80%" data={data}>
        <PolarGrid />
        <PolarAngleAxis dataKey="subject" />
        <Radar name="Student A" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
        <Radar name="Student B" dataKey="B" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6} />
      </RadarChart>
    </ResponsiveContainer>
  );
};

export default RadarChartExample;

위 예제에서는 data 배열에 학생의 주제별 점수를 저장하고, RadarChart 컴포넌트를 통해 레이더 차트를 그립니다. PolarGrid, PolarAngleAxis 컴포넌트를 사용하여 그래프의 격자와 각축의 표시를 설정하고, Radar 컴포넌트를 사용하여 각 항목의 데이터를 표현합니다.

위 코드를 실행하면 주어진 데이터를 기반으로 레이더 차트가 그려집니다. 각 주제별로 학생 A와 학생 B의 점수를 비교할 수 있습니다. Recharts를 활용하면 다양한 설정과 데이터를 이용하여 원하는 레이더 차트를 그릴 수 있습니다.