React Chart Highlighting Example

    다음 예제에서는 React 차트에서 사용할 수 있는 다양한 강조 표시 옵션을 보여 줍니다.

    React 차트 강조 모드 및 동작

    모든 React 차트는 다양한 강조 옵션을 지원합니다. highlightingMode 플롯 영역에 렌더링된 시리즈/데이터 항목 위로 마우스를 가져갈 때 밝아지거나 희미해지도록 설정할 수 있습니다. highlightingBehavior 강조 효과를 트리거하기 위해 바로 위 또는 가장 가까운 데이터 항목으로 설정할 수 있습니다. 강조 모드 및 동작은 IgrCategoryChart, IgrFinancialChart 및 IgrDataChart 컨트롤에서 지원되며 강조 기능을 사용하기 위한 동일한 API를 갖습니다.

    다음 예제에서는 React 차트를 highlightingMode 보여 줍니다.

    다음 예제에서는 React 차트를 highlightingBehavior 보여 줍니다.

    React 차트 범례 강조 표시

    모든 React 차트는 범례 강조 표시를 지원합니다. legendHighlightingMode 활성화하면 마우스를 범례 마커 항목 위로 가져갈 때 렌더링된 시리즈가 플롯 영역에서 강조 표시됩니다. 범례 강조 표시는 IgrCategoryChart, IgrFinancialChart 및 IgrDataChart 컨트롤에서 지원되며 강조 표시 기능을 사용하기 위한 동일한 API를 갖습니다.

    다음 예제에서는 차트를 강조 표시하는 범례 계열 React 보여 줍니다.

    Highlight Layers

    Ignite UI for React IgrCategoryChart 데이터 항목 위로 마우스를 가져갈 때 세 가지 유형의 강조 표시를 활성화할 수 있습니다.

    1. 계열 강조 표시는 포인터가 마커나 열 위에 있을 때 표시되는 단일 데이터 포인트를 강조 표시합니다. 이는 isSeriesHighlightingEnabled 속성을 true로 설정하여 활성화됩니다.

    2. 항목 강조 표시는 해당 위치에 줄무늬 모양을 그리거나 해당 위치에 마커를 렌더링하여 시리즈의 항목을 강조 표시합니다. 이는 isItemHighlightingEnabled 속성을 true로 설정하여 활성화됩니다.

    3. 범주 강조 표시는 차트의 모든 범주 축을 대상으로 합니다. 포인터 위치에 가장 가까운 축 영역을 비추는 모양을 그립니다. 이는 isCategoryHighlightingEnabled 속성을 true로 설정하여 활성화됩니다.

    다음 예제에서는 React 차트에서 사용할 수 있는 다양한 강조 표시 계층을 보여 줍니다.

    Additional Resources

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

    API References

    다음은 위 섹션에서 언급된 API 멤버 목록입니다.