[javascript] Recharts에서 차트의 현재 값을 애니메이션으로 표시하는 방법은 무엇인가요?

01 Dec 2023

javascript

먼저, Recharts 패키지를 설치해야 합니다. 명령 프롬프트에서 다음과 같은 명령을 실행하여 설치할 수 있습니다:

npm install recharts

다음은 Recharts를 사용하여 애니메이션으로 현재 값을 표시하는 예시입니다:

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

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

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

export default App;

위 예시에서 Line 컴포넌트의 animationBegin과 animationDuration 속성을 사용하여 애니메이션의 시작 및 지속 시간을 설정합니다. 이 예시에서는 애니메이션이 0초에 시작하고 1초 동안 지속됩니다. 차트에 나타나는 각각의 데이터 포인트는 주어진 지속 시간 동안 점진적으로 표시됩니다.

이렇게 하면 Recharts를 사용하여 차트의 현재 값을 애니메이션으로 표시할 수 있습니다. 차트에 대한 더 많은 커스터마이징 옵션은 Recharts 공식 문서를 참조하세요.