[javascript] Recharts에서 누락된 데이터를 표시할 때 기본적으로 제공되는 도화선 대신 사용자 정의된 아이콘을 사용하는 방법은 무엇인가요?

01 Dec 2023

javascript

먼저, Recharts 패키지를 설치해야 합니다. 프로젝트 디렉토리에서 아래 명령어를 실행하세요:

npm install recharts

다음으로, 사용자 정의 아이콘을 렌더링할 CustomizedDot 컴포넌트를 생성해야 합니다:

import React from 'react';
import { Dot } from 'recharts';

const CustomizedDot = (props) => {
  const { cx, cy, payload } = props;

  // 누락된 데이터에 대한 조건 처리
  if (payload.value === null) {
    return (
      <svg x={cx - 10} y={cy - 10} width={20} height={20}>
        {/* 사용자 정의 아이콘 렌더링 */}
        <path d="M10,10 L0,0 L20,0 Z" fill="red" />
      </svg>
    );
  }

  // 누락된 데이터가 아닌 경우 도화선 렌더링
  return <Dot {...props} />;
};

export default CustomizedDot;

위 예시에서는 누락된 데이터에 대해 사용자 정의 아이콘을 렌더링하도록 설정했습니다. 누락된 데이터를 특정 조건으로 판단하고 M10,10 L0,0 L20,0 Z 경로를 가지는 삼각형 아이콘을 사용했습니다.

마지막으로, Recharts에서 사용할 차트 컴포넌트에서 CustomizedDot을 import하여 사용할 수 있습니다. 예를 들어, LineChart 컴포넌트에서 CustomizedDot을 사용하려면 아래와 같이 코드를 작성할 수 있습니다:

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

const data = [
  { name: 'A', value: 50 },
  { name: 'B', value: null },
  { name: 'C', value: 30 },
  { name: 'D', value: 70 },
];

const App = () => {
  return (
    <LineChart width={500} height={300} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <CartesianGrid />
      <Tooltip />
      <Legend />
      <Line dataKey="value" dot={<CustomizedDot />} />
    </LineChart>
  );
};

export default App;

위 예시에서는 Line 컴포넌트에서 dot prop을 사용하여 CustomizedDot 컴포넌트를 전달하고 있습니다. 이렇게 하면 누락된 데이터에 대해 도화선 대신 사용자 정의 아이콘을 렌더링할 수 있습니다.

더 자세한 내용을 원하신다면 Recharts 공식 문서를 참고하시기 바랍니다. Recharts 공식 문서