[javascript] Recharts에서 차트의 특정 데이터 포인트에 대한 추가 정보를 팝오버로 표시하는 방법은 무엇인가요?

01 Dec 2023

javascript

Recharts에서는 Customized Label을 사용하여 데이터 포인트에 대한 추가 정보를 표시할 수 있습니다. Customized Label은 각각의 데이터 포인트에 대해 원하는 형태로 렌더링할 수 있는 컴포넌트입니다. 데이터 포인트 위에 팝오버 형태로 정보를 추가할 수 있습니다.

먼저, Recharts의 LineChart 예제를 사용하여 설명하겠습니다. 차트의 데이터 포인트에 대한 팝오버를 추가하려면 다음 단계를 따르면 됩니다.

Recharts 패키지를 설치합니다:

npm install recharts

다음과 같이 LineChart를 구성합니다:

import React from 'react';
import { LineChart, Line, XAxis, YAxis, Label, Tooltip, Legend, CartesianGrid } from 'recharts';

const data = [
  { name: 'Jan', uv: 4000, pv: 2400, amt: 2400 },
  { name: 'Feb', uv: 3000, pv: 1398, amt: 2210 },
  { name: 'Mar', uv: 2000, pv: 9800, amt: 2290 },
  { name: 'Apr', uv: 2780, pv: 3908, amt: 2000 },
  { name: 'May', uv: 1890, pv: 4800, amt: 2181 },
  { name: 'Jun', uv: 2390, pv: 3800, amt: 2500 }
];

const CustomizedLabel = ({ x, y, stroke, value }) => {
  return (
    <g>
      <text x={x} y={y} dy={-4} fill={stroke} fontSize={10} textAnchor="middle">{value}</text>
      <circle cx={x} cy={y} r={4} fill={stroke} stroke="none" />
    </g>
  );
};

const App = () => (
  <LineChart width={400} height={300} data={data}>
    <XAxis dataKey="name" />
    <YAxis />
    <CartesianGrid />
    <Line type="monotone" dataKey="uv" stroke="#8884d8" label={<CustomizedLabel />} />
    <Tooltip />
    <Legend />
  </LineChart>
);

export default App;

CustomizedLabel 컴포넌트를 생성하여 팝오버에 추가할 정보를 렌더링합니다. CustomizedLabel은 데이터 포인트의 x좌표와 y좌표, 추가로 표시할 정보를 받아와 렌더링합니다. 위의 예제에서는 데이터 포인트를 표시하기 위해 텍스트와 원을 사용하였습니다.
Line 컴포넌트에서 label prop을 사용하여 CustomizedLabel 컴포넌트를 설정합니다. 이렇게 하면 각 데이터 포인트에 대해 CustomizedLabel이 렌더링되며, 팝오버 형태로 데이터 포인트에 추가 정보를 표시할 수 있습니다.

위의 예제 코드에서는 간단한 팝오버 형태로 데이터 포인트 위에 텍스트와 원을 표시하였지만, 필요에 따라 팝오버 컴포넌트를 수정하여 원하는 형태로 렌더링할 수 있습니다.