[javascript] Recharts에서 차트의 확대/축소 기능을 추가하는 방법은 무엇인가요?

01 Dec 2023

javascript

Zoomable 컴포넌트 사용하기

Recharts에서 제공하는 Zoomable 컴포넌트는 차트를 확대하고 축소할 수 있는 기능을 제공합니다. 다음은 Zoomable 컴포넌트를 사용하여 확대/축소 기능을 추가하는 예시 코드입니다.

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

const data = [
  { name: 'Jan', value: 100 },
  { name: 'Feb', value: 200 },
  { name: 'Mar', value: 150 },
  // 이하 데이터 생략
];

const Chart = () => {
  return (
    <LineChart width={500} height={300} data={data}>
      <Zoomable>
        <XAxis dataKey="name" />
        <YAxis />
        <Line type="monotone" dataKey="value" stroke="#8884d8" />
      </Zoomable>
    </LineChart>
  );
}

export default Chart;

위의 코드에서는 Zoomable 컴포넌트를 LineChart 컴포넌트로 감싸고 있습니다. 이제 차트를 렌더링하면 화면에서 확대/축소 기능을 사용할 수 있게 됩니다.

React의 state와 이벤트 핸들러 사용하기

두 번째 방법은 React의 state와 이벤트 핸들러를 사용하여 확대/축소 기능을 구현하는 것입니다. 다음은 React Hooks를 사용하여 확대/축소 기능을 추가하는 예시 코드입니다.

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

const data = [
  { name: 'Jan', value: 100 },
  { name: 'Feb', value: 200 },
  { name: 'Mar', value: 150 },
  // 이하 데이터 생략
];

const Chart = () => {
  const [zoomed, setZoomed] = useState(false);

  const handleToggleZoom = () => {
    setZoomed(!zoomed);
  }

  return (
    <div>
      <button onClick={handleToggleZoom}>Toggle Zoom</button>
      <LineChart width={500} height={300} data={data} zoomEnabled={zoomed}>
        <XAxis dataKey="name" />
        <YAxis />
        <Line type="monotone" dataKey="value" stroke="#8884d8" />
      </LineChart>
    </div>
  );
}

export default Chart;

위의 코드에서는 useState 훅을 사용하여 zoomed라는 상태 값을 관리하고, handleToggleZoom 함수를 통해 상태 값을 변경합니다. LineChart 컴포넌트의 zoomEnabled prop을 zoomed 값을 사용하도록 설정하여 확대/축소 기능을 제어합니다. Toggle Zoom 버튼을 클릭하면 확대/축소가 가능한 차트로 전환됩니다.

이러한 방법으로 Recharts에서 차트의 확대/축소 기능을 추가할 수 있습니다. 선택한 방법에 따라 코드를 작성하고, 필요에 따라 스타일링을 추가하여 원하는 결과를 얻을 수 있습니다.