[javascript] Recharts의 인기 있는 차트 유형은 무엇인가요?

01 Dec 2023

javascript

1. 선 그래프(Line Chart)

선 그래프는 시간이나 값의 변화를 추적할 때 많이 사용됩니다. Recharts의 LineChart 컴포넌트를 사용하여 간단하게 선 그래프를 생성할 수 있습니다. 선 그래프는 추세를 시각적으로 파악하기에 유용합니다.

예시 코드:

<LineChart width={500} height={300} data={data}>
  <Line type="monotone" dataKey="value" stroke="#8884d8" />
  <CartesianGrid stroke="#ccc" />
  <XAxis dataKey="time" />
  <YAxis />
  <Tooltip />
</LineChart>

2. 막대 그래프(Bar Chart)

막대 그래프는 범주별 데이터를 비교하기에 적합합니다. Recharts의 BarChart 컴포넌트를 사용하면 간단하게 막대 그래프를 생성할 수 있습니다. 막대 그래프는 데이터 간 상대적인 크기를 시각적으로 파악하기에 용이합니다.

예시 코드:

<BarChart width={500} height={300} data={data}>
  <Bar dataKey="value" fill="#8884d8" />
  <CartesianGrid stroke="#ccc" />
  <XAxis dataKey="category" />
  <YAxis />
  <Tooltip />
</BarChart>

3. 원 그래프(Pie Chart)

원 그래프는 전체에서 각 항목의 비율을 알고 싶을 때 유용합니다. Recharts의 PieChart 컴포넌트를 사용하여 간단하게 원 그래프를 생성할 수 있습니다. 원 그래프는 각 항목이 전체에서 차지하는 비율을 시각적으로 파악하기에 효과적입니다.

예시 코드:

<PieChart width={500} height={300}>
  <Pie data={data} dataKey="value" nameKey="category" cx="50%" cy="50%" outerRadius={100} fill="#8884d8" label />
  <Tooltip />
</PieChart>

Recharts를 사용하면 다양한 차트 유형을 손쉽게 구현할 수 있습니다. 필요에 따라 다른 유형의 차트를 선택하여 데이터를 시각적으로 표현해보세요. 자세한 내용은 Recharts 공식 문서를 참고하시기 바랍니다.