[javascript] Recharts에서 차트의 특정 부분을 범례로 클릭하여 해당 데이터를 표시 또는 감추는 방법은 무엇인가요?

01 Dec 2023

javascript

먼저, Legend 컴포넌트에 onClick 이벤트 핸들러를 추가해야 합니다. 이 핸들러는 클릭 이벤트가 발생할 때 실행되는 함수입니다. 해당 함수에서는 클릭된 범례 아이콘의 데이터를 감지하고, 이를 기반으로 차트에서 해당 데이터를 표시하거나 감추면 됩니다.

아래는 이를 구현한 예시 코드입니다.

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

const data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 30 },
];

const Chart = () => {
  const [hiddenData, setHiddenData] = useState([]);

  const handleClick = (dataKey) => {
    if (hiddenData.includes(dataKey)) {
      setHiddenData(hiddenData.filter((key) => key !== dataKey));
    } else {
      setHiddenData([...hiddenData, dataKey]);
    }
  };

  return (
    <LineChart width={400} height={300} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <Legend onClick={handleClick} />
      <Line type="monotone" dataKey="value" stroke="#8884d8" isAnimationActive={!hiddenData.includes('value')} />
    </LineChart>
  );
};

export default Chart;

위 코드에서 handleClick 함수는 범례 아이콘을 클릭하면 실행되며, hiddenData 상태 배열에 클릭된 데이터가 포함되어 있는지를 체크합니다. 데이터가 이미 숨겨진 상태라면 해당 데이터를 hiddenData에서 제거하고, 그렇지 않다면 hiddenData에 데이터를 추가합니다.

Line 컴포넌트의 isAnimationActive 속성을 사용하여 데이터가 숨겨져 있는지 여부에 따라 애니메이션 효과를 제어할 수 있습니다.

위 예시 코드를 실행하면, Recharts로 구현된 차트에서 범례를 클릭하면 해당 데이터가 숨겨지거나 표시되는 것을 확인할 수 있습니다.

이 코드는 Recharts 라이브러리를 사용한 예시이며, 실제 프로젝트에 적용할 때는 데이터와 스타일을 알맞게 수정해야 합니다. Recharts 공식 문서에서 다양한 커스터마이징 옵션과 예시 코드를 확인할 수 있습니다.

References:

Recharts Documentation