[javascript] Recharts에서 데이터 포인트를 감싸는 원형 배경을 추가하는 방법은 무엇인가요?

01 Dec 2023

javascript

Recharts에서 데이터 포인트를 감싸는 원형 배경을 추가하려면 CustomShape를 사용해야 합니다. CustomShape 컴포넌트를 생성하고, 원형 배경의 반지름, 색상 등을 정의할 수 있습니다.

먼저 Recharts 라이브러리를 설치해보겠습니다.

npm install recharts

다음은 원형 배경을 추가하는 예제 코드입니다.

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

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

const CircleBackground = ({ cx, cy, radius }) => {
  return <circle cx={cx} cy={cy} r={radius} fill="lightblue" />;
};

const App = () => {
  return (
    <LineChart width={400} height={300} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <CustomShape
        component={CircleBackground}
        cx={200} // 원형 배경의 중심 x 좌표
        cy={150} // 원형 배경의 중심 y 좌표
        radius={20} // 원형 배경의 반지름
      />
      <Line type="monotone" dataKey="value" stroke="#8884d8" />
    </LineChart>
  );
};

export default App;

위 예제 코드에서는 CircleBackground라는 CustomShape 컴포넌트를 생성했습니다. 이 컴포넌트는 원형 배경을 그리는 역할을 합니다. component prop에는 CircleBackground 컴포넌트를 전달하고, 원형 배경의 중심 좌표와 반지름을 설정했습니다.

또한, CustomShape 컴포넌트를 LineChart 컴포넌트 안에 추가하여 데이터 시각화에 사용하였습니다.

이제 Recharts를 사용하여 데이터 포인트를 감싸는 원형 배경을 추가할 수 있습니다.