React 차트 탐색

    Ignite UI for React 하면 마우스, 키보드, 터치를 사용하여 대화형 팬 및 확대/축소가 가능합니다.

    React Chart Navigation Example

    다음 예에서는 사용 가능한 모든 이동 및 확대/축소 옵션을 보여줍니다. 버튼을 사용하여 예제와 상호 작용하거나 드롭다운 또는 확인란을 사용하여 원하는 옵션을 선택할 수 있습니다.

    이 샘플이 마음에 드시나요? 당사의 완전한 React 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    Chart Navigation with User Interactions

    Whether or not zooming is on by default depends on the chart you are using. If you are using IgrCategoryChart, it is on by default, but it is not in the IgrDataChart. In order to enable or disable navigation in the UI, you need to set either the isHorizontalZoomEnabled and/or the isVerticalZoomEnabled properties of the chart, depending on the direction that you wish to enable or disable zooming.

    It is also possible to zoom or pan simply by clicking the mouse or using touch. The defaultInteraction property of the data chart determines what happens on mouse click or touch events. This property defaults to DragZoom and when set to this with zooming enabled, clicking and dragging will place a preview rectangle over the plot area that will become the zoomed area of the chart. This defaultInteraction property can also be set to either DragPan to allow panning or None to prevent these operations.

    Chart Navigation with Touch, Mouse and Keyboard

    React 데이터 차트의 탐색은 터치, 마우스 또는 키보드로 수행할 수 있습니다. 다음 작업은 기본적으로 터치, 마우스 또는 키보드 작업을 사용하여 호출할 수 있습니다.

    • 이동: 키보드의 화살표 키를 사용 🡐 🡓 🡒 🡑 하거나 키를 누른 상태 SHIFT에서 마우스로 클릭하고 드래그하거나 터치를 통해 손가락을 누르고 움직입니다.
    • 확대: 키보드의 키를 사용 PAGE UP 하거나, 마우스 휠을 위로 올리거나, 손가락을 모아 터치를 통해 확대합니다.
    • 축소: 키보드의 키를 사용 PAGE DOWN 하거나, 마우스 휠을 아래로 굴리거나, 터치를 통해 손가락을 모아 축소합니다.
    • 차트 플롯 영역에 맞추 기: 키보드의 키를 사용합니다 HOME. 이에 대한 마우스 또는 터치 조작은 없습니다.
    • Area Zoom: Click and drag the mouse within the plot area with the defaultInteraction property set to its default - DragZoom.

    The zoom and pan operations can also be enabled by using modifier keys by setting the dragModifier and panModifier properties, respectively. These properties can be set to the following modifier keys, and when pressed, the corresponding operation will be executed:

    수정자 값 해당 키
    Shift 교대
    Control Ctrl 키
    Windows 승리
    Apple 사과
    None 열쇠 없음

    Chart Navigation with Scrollbars

    The chart can be scrolled by enabling the verticalViewScrollbarMode and horizontalViewScrollbarMode properties.

    다음 옵션으로 구성할 수 있습니다.

    • Persistent - The scrollbars always stay visible, as long as the chart is zoomed in, and fade away when fully zoomed out.
    • Fading - The scrollbars disappear after use and reappear when the mouse is near their location.
    • FadeToLine - The scrollbars are reduced to a thinner line when zooming is not in use.
    • None - Default, no scrollbars are shown.

    다음 예에서는 스크롤 막대를 활성화하는 방법을 보여줍니다.

    Chart Navigation through Code

    [!Note] Code navigation of the chart can only be used for the IgrDataChart control.

    React 데이터 차트는 차트에서 확대/축소 또는 팬 작업이 발생할 때마다 업데이트되는 여러 탐색 속성을 제공합니다. 이러한 각 속성을 설정하여 데이터 차트를 프로그래밍 방식으로 확대/축소 또는 팬할 수도 있습니다. 다음은 이러한 속성의 목록입니다.

    • windowPositionHorizontal: A numeric value describing the X portion of the content view rectangle displayed by the data chart.
    • windowPositionVertical: A numeric value describing the Y portion of the content view rectangle displayed by the data chart.
    • windowRect: A Rect object representing a rectangle that represents the portion of the chart that is currently in view. For example, a windowRect of "0, 0, 1, 1" would be the entirety of the data chart.
    • windowScaleHorizontal: A numeric value describing the width portion of the content view rectangle displayed by the data chart.
    • windowScaleVertical: A numeric value describing the height portion of the content view rectangle displayed by the data chart.

    Additional Resources

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

    API References

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