[javascript] Recharts에서 좌표 추세를 그리는 방법은 무엇인가요?

01 Dec 2023

javascript

먼저, 필요한 패키지를 설치합니다. 아래의 명령어를 사용하여 설치할 수 있습니다.

npm install recharts

다음으로, LineChart 컴포넌트를 사용하여 좌표 추세를 그립니다. 아래는 예시 코드입니다.

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

const data = [
  { name: '1월', value: 100 },
  { name: '2월', value: 200 },
  { name: '3월', value: 300 },
  { name: '4월', value: 400 },
  { name: '5월', value: 500 },
];

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

export default TrendChart;

위의 예시 코드에서는 data 배열에 각 점의 이름과 값을 설정합니다. LineChart 컴포넌트에는 width, height, data 속성을 전달하고, 선의 색상을 지정하기 위해 Line 컴포넌트에 stroke 속성을 설정합니다.

또한, CartesianGrid, XAxis, YAxis, Tooltip 및 Legend 컴포넌트를 사용하여 그래프를 보조하고, 세부 정보를 표시할 수 있습니다.

위의 코드를 실행하면 좌표 추세를 나타내는 그래프가 생성됩니다. 필요에 따라 데이터와 스타일을 변경하여 자신의 프로젝트에 맞게 사용할 수 있습니다. Recharts 문서에는 더 많은 사용 예제와 설정 옵션이 있으니 참고하시기 바랍니다.