[javascript] Recharts에서 차트의 특정 데이터와 관련된 동그라미 모양의 아이콘을 표시하는 방법은 무엇인가요?

01 Dec 2023

javascript

Customized Dot은 Recharts의 Scatter 컴포넌트에서 사용할 수 있는 속성입니다. Scatter 컴포넌트는 산점도를 그릴 때 사용되며, 특정 데이터 포인트에 동그라미 모양의 아이콘을 표시하는 데에 매우 유용합니다.

아래의 예제 코드를 참고하시기 바랍니다.

import React from 'react';
import { Scatter, ScatterChart, XAxis, YAxis, ZAxis, Tooltip, Legend } from 'recharts';

const data = [
  { x: 1, y: 10, z: 'A' },
  { x: 2, y: 30, z: 'B' },
  { x: 3, y: 50, z: 'C' },
  { x: 4, y: 20, z: 'D' },
];

const CustomizedDot = ({ cx, cy }) => (
  <svg x={cx - 5} y={cy - 5} width={10} height={10}>
    <circle cx={5} cy={5} r={5} fill="red" />
  </svg>
);

const ChartWithCustomizedDot = () => (
  <ScatterChart width={400} height={300} margin={{ top: 20, right: 20, bottom: 10, left: 10 }}>
    <XAxis dataKey="x" type="number" />
    <YAxis dataKey="y" type="number" />
    <ZAxis dataKey="z" type="category" name="z" />
    <Scatter data={data} fill="blue" shape={<CustomizedDot />} />
    <Tooltip cursor={{ strokeDasharray: '3 3' }} />
    <Legend />
  </ScatterChart>
);

export default ChartWithCustomizedDot;

위의 예제 코드에서 CustomizedDot 컴포넌트는 Scatter 컴포넌트에서 사용됩니다. 이 컴포넌트는 Scatter 컴포넌트에 전달되어 각 데이터 포인트마다 동그라미 모양의 아이콘을 표시합니다. 이 아이콘의 위치는 cx와 cy 속성으로 조정할 수 있습니다.

실제 데이터는 data 배열에 포함되어 있으며, x, y 및 z 속성을 통해 각 데이터 포인트의 값을 설정합니다.

ChartWithCustomizedDot 컴포넌트는 ScatterChart 컴포넌트를 사용하여 그래프를 그립니다. XAxis, YAxis, ZAxis 컴포넌트는 각각 x, y 및 z 축을 정의하고, Scatter 컴포넌트는 데이터를 산점도로 렌더링합니다.

위의 예제 코드를 보시면서 Recharts를 사용하여 특정 데이터와 관련된 동그라미 모양의 아이콘을 표시하는 방법을 좀 더 자세히 이해하실 수 있을 겁니다. 만약 추가적인 도움이 필요하시다면, Recharts 공식 문서를 참고하시기 바랍니다.

참고 문서:

Recharts 공식 문서