[javascript] Recharts에서 애니메이션 효과를 추가하는 방법은 무엇인가요?

01 Dec 2023

javascript

애니메이션을 추가하려면, animationBegin 속성을 설정하여 애니메이션이 시작되는 시간을 지정할 수 있습니다. 값을 설정하지 않으면 애니메이션은 즉시 시작됩니다. animationDuration 속성을 사용하여 애니메이션의 지속 시간을 설정할 수 있습니다. 기본값은 1500ms입니다.

import { LineChart, Line, XAxis, YAxis } from 'recharts';

const data = [
  { name: 'Jan', uv: 200, pv: 240 },
  { name: 'Feb', uv: 300, pv: 340 },
  { name: 'Mar', uv: 400, pv: 540 },
  // ...
];

const App = () => {
  return (
    <LineChart width={400} height={300} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <Line type="monotone" dataKey="pv" stroke="#8884d8" animationBegin={0} animationDuration={2000} />
    </LineChart>
  );
};

export default App;

위 코드 예시에서 Line 컴포넌트의 animationBegin 속성은 0으로 설정되어 있고, animationDuration 속성은 2000으로 설정되어 있습니다. 이렇게 설정하면 Line 컴포넌트의 애니메이션이 0초부터 시작하여 2초 동안 지속됩니다.

Recharts에서는 다양한 컴포넌트와 애니메이션 속성을 제공합니다. 필요에 따라 적절한 속성을 설정하여 원하는 애니메이션 효과를 구현할 수 있습니다. 자세한 내용은 Recharts 공식문서를 참조하시기 바랍니다.