[javascript] Recharts에서 데이터 포인트를 움직여서 차트의 값이 변경될 때 애니메이션을 표시하는 방법은 무엇인가요?

01 Dec 2023

javascript

아래는 Recharts에서 데이터 포인트를 움직여서 애니메이션을 표시하는 방법에 대한 예시 코드입니다.

import React, { useState } from "react";
import { LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid, ResponsiveContainer } from "recharts";

const ChartExample = () => {
  const [data, setData] = useState([
    { name: "A", value: 10 },
    { name: "B", value: 20 },
    { name: "C", value: 30 },
    { name: "D", value: 40 },
  ]);

  const handleButtonClick = () => {
    const newData = [
      { name: "A", value: 50 },
      { name: "B", value: 60 },
      { name: "C", value: 70 },
      { name: "D", value: 80 },
    ];
    setData(newData);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>Change Data</button>
      <ResponsiveContainer width="100%" height={300}>
        <LineChart data={data}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Line type="monotone" dataKey="value" stroke="#8884d8" animationBegin={0} animationDuration={1000} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
};

export default ChartExample;

위의 예시 코드는 Button 컴포넌트를 클릭할 때마다 데이터 포인트를 변경합니다. 애니메이션 효과를 적용하기 위해 Line 컴포넌트에 animationBegin={0} 및 animationDuration={1000} props를 추가합니다. animationBegin는 애니메이션의 시작 시간을 나타내며, animationDuration은 애니메이션의 지속 시간을 나타냅니다.

위의 코드를 실행하면 데이터 포인트가 변경될 때 애니메이션 효과가 적용된 라인 차트를 확인할 수 있습니다.