[javascript] Recharts에서 특정 데이터 포인트에 대한 커스텀 표식을 클릭하여 추가 정보를 표시하는 방법은 무엇인가요?

01 Dec 2023

javascript

Recharts에서 데이터 포인트를 클릭하면 사용자 정의 이벤트 핸들러를 추가할 수 있습니다. 이를 활용하여 클릭 이벤트가 발생했을 때 추가 정보를 표시할 수 있습니다.

먼저, Recharts의 <BarChart>나 <LineChart> 등과 같은 컴포넌트로 그래프를 생성합니다. 그런 다음 onMouseUp 또는 onClick과 같은 이벤트 핸들러를 사용하여 클릭 이벤트를 처리합니다.

아래는 예시 코드입니다.

import React, { useState } from 'react';
import { BarChart, Bar, XAxis, YAxis, Tooltip, Legend } from 'recharts';

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

const CustomBar = ({ handleClick, ...props }) => (
  <Bar {...props} onClick={handleClick} />
);

const App = () => {
  const [selectedData, setSelectedData] = useState(null);

  const handleBarClick = (data) => {
    setSelectedData(data);
    // 선택한 데이터에 대한 추가 정보를 표시하는 코드 작성
  };

  return (
    <BarChart width={400} height={300} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <CustomBar dataKey="value" fill="#8884d8" handleClick={handleBarClick} />
    </BarChart>
  );
};

export default App;

위의 예시 코드에서 CustomBar 컴포넌트는 <Bar> 컴포넌트를 확장한 컴포넌트입니다. 이 컴포넌트 내에서 onClick 이벤트를 처리하고, 클릭된 데이터를 handleBarClick 함수로 전달합니다. handleBarClick 함수에서는 선택된 데이터에 대한 추가 정보를 표시하는 코드를 작성하면 됩니다.

이렇게 하면 Recharts에서 특정 데이터 포인트에 대한 커스텀 표식을 클릭하여 추가 정보를 표시할 수 있습니다. Recharts의 다른 컴포넌트에서도 마찬가지 방법으로 이벤트 핸들러를 추가하여 원하는 기능을 구현할 수 있습니다.