[javascript] Recharts에서 데이터 배열을 사용하여 차트를 그리는 방법은 무엇인가요?

01 Dec 2023

javascript

Recharts 패키지 설치하기
```
npm install recharts
```

Recharts 컴포넌트를 import하기

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

데이터 배열 준비하기

const data = [
  { name: '1월', value: 100 },
  { name: '2월', value: 200 },
  { name: '3월', value: 150 },
  // ...
];

차트 컴포넌트 사용하기

   
const MyChart = () => (
  <LineChart width={400} height={300} data={data}>
    <XAxis dataKey="name"/>
    <YAxis/>
    <CartesianGrid strokeDasharray="3 3"/>
    <Tooltip/>
    <Legend/>
    <Line type="monotone" dataKey="value" stroke="#8884d8" activeDot={{ r: 8 }}/>
  </LineChart>
);
   

차트 컴포넌트 렌더링하기

ReactDOM.render(<MyChart />, document.getElementById("root"));

위의 예제는 LineChart를 사용한 간단한 선 그래프입니다. 데이터 배열을 생성하고 LineChart 컴포넌트 내에 XAxis, YAxis, CartesianGrid, Tooltip, Legend, Line 등을 포함시켜서 원하는 형태의 차트를 그릴 수 있습니다. 데이터 배열에 적절한 값을 넣고 컴포넌트를 사용하는 방법을 응용하여 다양한 차트를 그릴 수 있습니다.