[javascript] Recharts에서 차트의 특정 부분을 드래그하여 선택하는 방법은 무엇인가요?

01 Dec 2023

javascript

Recharts 패키지를 프로젝트에 추가합니다. 프로젝트에 Recharts를 설치하기 위해서는 npm이나 yarn을 사용할 수 있습니다.

npm install recharts

Recharts의 <AreaChart> 또는 <LineChart> 컴포넌트를 import 합니다.

import { AreaChart, LineChart } from 'recharts';

원하는 방식으로 데이터를 구성하고, 해당 데이터를 차트 컴포넌트의 data prop으로 전달합니다.

const data = [
  { name: 'Jan', value: 100 },
  { name: 'Feb', value: 200 },
  { name: 'Mar', value: 150 },
  // ...
];

<AreaChart data={data}>
  // ...
</AreaChart>

<AreaChart> 또는 <LineChart> 컴포넌트 내에서 <Brush> 컴포넌트를 추가합니다. Brush 컴포넌트는 드래그 가능한 선택 영역을 생성하는 데 사용됩니다.

<AreaChart data={data}>
  // ...

  <Brush dataKey="name" height={30} />
</AreaChart>

드래그하여 선택하는 영역에 대한 정보를 처리하기 위해서는 onBrushEnd prop을 사용합니다. 이 prop은 드래그가 완료되었을 때 호출되는 콜백 함수를 설정할 수 있습니다.

<AreaChart data={data}>
  // ...

  <Brush dataKey="name" height={30} onBrushEnd={handleBrushEnd} />
</AreaChart>

handleBrushEnd 함수를 정의하여 선택된 영역에 대한 처리를 구현합니다. 예를 들어, 선택된 영역의 시작값과 끝값을 출력하는 코드는 다음과 같습니다.

const handleBrushEnd = (e) => {
  console.log('Start:', e.startIndex);
  console.log('End:', e.endIndex);
};

드래그하여 선택 영역을 구현하는 방법에 대해 알아보았습니다. 이를 활용하여 Recharts의 다양한 차트 유형에서 사용자가 원하는 특정 부분을 선택할 수 있습니다.

참고 자료:

Recharts 공식 문서