React 차트 툴팁

    React 차트에서는 툴팁이 바인드 데이터에 대한 세부 정보를 제공하며, 최종 사용자가 데이터 포인트 위에 마우스를 올릴 때 팝업으로 렌더링됩니다. 툴팁은 ,IgrCategoryChart​IgrFinancialChart​IgrDataChart, 그리고 컨트롤에 의해 지원됩니다.

    React Chart Tooltip Types

    React 차트는 속성을 설정toolTipType 하여 툴팁을 활성화하면 세 가지 유형의 툴팁을 제공합니다. 다음 예시는 툴팁 유형을 변경할 수 있는 콤보 박스가 있는 기둥 차트을 보여줍니다.

    이 속성은toolTipType 구성 가능하며 다음 옵션 중 하나로 설정할 수 있습니다:

    자산 가치 설명
    Default툴팁 포인터를 항목 위에 놓으면 해당 항목에 대한 도구 설명이 표시됩니다.
    Data툴팁 차트의 모든 계열에 대한 데이터 도구 설명을 표시합니다.
    Item툴팁 포인터가 위치한 범주의 각 데이터 항목에 대한 도구 설명을 표시합니다.
    Category툴팁 포인터가 위치한 범주의 모든 데이터 포인트에 대해 그룹화된 도구 설명을 표시합니다.

    React Chart Tooltip Template

    기본 제공 유형의 툴팁이 요구 사항과 일치하지 않는 경우, 시리즈 제목, 데이터 값, 축 값을 표시하고 스타일을 지정하는 고유한 툴팁을 만들 수 있습니다. 다음 섹션에서는 다양한 유형의 React 차트에서 이를 수행하는 방법을 보여줍니다.

    Custom Tooltips in Category Chart

    이 예시는 ReactIgrCategoryChart 컨트롤 내 모든 시리즈에 대해 맞춤형 툴팁을 만드는 방법을 보여줍니다. 같은 논리를 ReactIgrFinancialChart 컨트롤의 커스텀 툴팁에도 적용할 수 있다는 점을 참고하세요.

    Custom Tooltips in Data Chart

    이 예제에서는 React 데이터 차트 컨트롤의 각 시리즈에 대한 사용자 정의 도구 설명을 만드는 방법을 보여줍니다.

    Additional Resources

    다음 항목에서 관련 차트 기능에 대한 자세한 내용을 확인할 수 있습니다.

    API References

    와IgrCategoryChart 컴포넌트는IgrFinancialChart 다음과 같은 API 속성을 공유합니다:

    컴포넌트에서는IgrDataChart 다음과 같은 API 컴포넌트와 속성을 사용할 수 있습니다: