[javascript] Recharts에서 특정 시점의 데이터 포인트를 강조하는 방법은 무엇인가요?
Recharts에서 특정 시점의 데이터 포인트를 강조하기 위해서는 ReferenceDot
구성 요소를 사용할 수 있습니다. ReferenceDot
은 그래프의 특정 위치에 원하는 마크를 그릴 수 있게 해줍니다.
먼저, ReferenceDot
구성 요소를 import 합니다.
import { ReferenceDot } from 'recharts';
그런 다음, 그래프에 ReferenceDot
을 추가하여 특정 시점의 데이터 포인트를 강조합니다. ReferenceDot
의 cx
와 cy
속성을 사용하여 데이터 포인트의 위치를 지정할 수 있습니다. 예를 들어, x축에서 5번째 데이터 포인트를 강조하려면 다음과 같이 cx
를 5로 설정합니다.
<ReferenceDot
cx={5}
cy={data[4].y}
r={4}
fill="red"
stroke="none"
label="특정 시점"
isFront
/>
위 예제에서 cy
속성은 데이터 배열 data
의 5번째 값의 y
속성을 사용하여 y축에서 데이터 포인트의 위치를 지정하고 있습니다. r
은 마커의 반지름, fill
은 마커 색상, stroke
는 마커 테두리 색상, label
은 마커에 표시될 텍스트입니다. isFront
는 마커가 그래프 요소 위에 표시되도록 하는 속성입니다.
위 코드를 그래프 구성 요소 내에 추가하고 원하는 시점을 설정하면 특정 시점의 데이터 포인트를 강조할 수 있습니다.
자세한 내용은 Recharts 문서를 참조하세요.