[javascript] Recharts에서 다차원 데이터를 시각화하는 방법은 무엇인가요?

01 Dec 2023

javascript

Recharts에서 다차원 데이터를 시각화하기 위해서는 데이터를 적절한 형식으로 구성해야 합니다.

다음은 다차원 데이터를 시각화하는 예제 코드입니다.

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [
  { name: 'Jan', A: 4000, B: 2400, C: 2400 },
  { name: 'Feb', A: 3000, B: 1398, C: 2210 },
  { name: 'Mar', A: 2000, B: 9800, C: 2290 },
  { name: 'Apr', A: 2780, B: 3908, C: 2000 },
  { name: 'May', A: 1890, B: 4800, C: 2181 },
  { name: 'Jun', A: 2390, B: 3800, C: 2500 },
  { name: 'Jul', A: 3490, B: 4300, C: 2100 },
  { name: 'Aug', A: 3490, B: 4300, C: 2100 },
  { name: 'Sep', A: 3490, B: 4300, C: 2100 },
  { name: 'Oct', A: 3490, B: 4300, C: 2100 },
  { name: 'Nov', A: 3490, B: 4300, C: 2100 },
  { name: 'Dec', A: 3490, B: 4300, C: 2100 },
];

const MultiLineChart = () => {
  return (
    <LineChart width={500} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="A" stroke="#8884d8" />
      <Line type="monotone" dataKey="B" stroke="#82ca9d" />
      <Line type="monotone" dataKey="C" stroke="#ffc658" />
    </LineChart>
  );
};

export default MultiLineChart;

이 코드는 LineChart 컴포넌트를 사용하여 다차원 데이터를 라인 차트로 시각화하는 예입니다. data 배열에는 각 데이터 포인트의 name과 A, B, C 등의 키 값이 포함되어 있습니다. 이 데이터를 Line 컴포넌트의 dataKey로 사용하여 선 그래프를 그립니다.

위 코드를 React 프로젝트에 포함시키고, MultiLineChart 컴포넌트를 렌더링하면 다차원 데이터가 시각화된 차트를 확인할 수 있습니다.

데이터의 구조와 차트의 형태에 따라 추가적인 설정이 필요할 수 있습니다. Recharts의 공식 문서를 참고하면 다양한 차트 및 기능에 대한 자세한 내용을 확인할 수 있습니다.