Web Components 차트 탐색

    Ignite UI for Web Components 마우스, 키보드 및 터치를 통해 대화형 이동 및 확대/축소가 가능합니다.

    Web Components Chart Navigation Example

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

    이 샘플이 마음에 드시나요? 전체 Web Components 툴킷에 액세스하여 몇 분 안에 자신만의 앱 구축을 시작하세요. 무료로 다운로드하세요.

    Chart Navigation with User Interactions

    확대/축소는 차트에서 기본적으로 켜져 있습니다. UI에서 탐색을 비활성화하려면 확대/축소를 비활성화하려는 방향에 따라 차트의 isHorizontalZoomEnabled 및/또는 isVerticalZoomEnabled 속성을 false로 설정해야 합니다.

    마우스를 클릭하거나 터치를 사용하여 간단히 확대/축소하거나 이동하는 것도 가능합니다. 데이터 차트의 defaultInteraction 속성은 마우스 클릭 또는 터치 이벤트에서 발생하는 상황을 결정합니다. 이 속성의 기본값은 DragZoom 이며 확대/축소가 활성화된 상태에서 이 속성으로 설정되면 클릭하고 끌면 차트의 확대/축소된 영역이 될 플롯 영역 위에 미리 보기 직사각형이 배치됩니다. 이 defaultInteraction 속성을 DragPan으로 설정하여 패닝을 허용하거나 None으로 설정하여 이러한 작업을 방지할 수도 있습니다.

    Chart Navigation with Touch, Mouse and Keyboard

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

    • 패닝: 키보드의 🡐 🡒 🡑 🡓 방향키를 사용하거나, Shift 키를 누른 채 마우스로 클릭하고 드래그하거나, 터치를 통해 손가락을 누르고 이동합니다.
    • 확대: 키보드의 Page Up 키를 이용하거나, 마우스 휠을 위로 굴리거나, 핀치 터치로 확대할 수 있습니다.
    • 축소: 키보드의 Page Down 키를 사용하거나, 마우스 휠을 아래로 굴리거나, 핀치 터치를 통해 축소합니다.
    • 차트 플롯 영역에 맞추기: 키보드의 Home 키를 사용합니다. 이에 대한 마우스나 터치 작업은 없습니다.
    • 영역 확대/축소: defaultInteraction 속성이 기본값인 DragZoom으로 설정된 플롯 영역 내에서 마우스를 클릭하고 드래그합니다.

    ​dragModifier 및 panModifier 속성을 각각 설정하여 수정자 키를 사용하여 확대/축소 및 이동 작업을 활성화할 수도 있습니다. 이러한 속성은 다음 수정자 키로 설정할 수 있으며, 누르면 해당 작업이 실행됩니다.

    수정자 값 해당 키
    Shift 옮기다
    Control Ctrl 키
    Windows 이기다
    Apple 사과
    None 열쇠 없음

    Chart Navigation with Scrollbars

    ​verticalViewScrollbarMode 및 horizontalViewScrollbarMode 속성을 활성화하여 차트를 스크롤할 수 있습니다.

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

    • Persistent- 차트가 확대되는 동안 스크롤 막대는 항상 표시되고 완전히 축소되면 사라집니다.
    • Fading- 사용 후 스크롤바가 사라지고 마우스가 해당 위치 근처에 있으면 다시 나타납니다.
    • FadeToLine- 확대/축소를 사용하지 않을 때 스크롤 막대가 더 얇은 선으로 줄어듭니다.
    • None- 기본값, 스크롤바가 표시되지 않습니다.

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

    Chart Navigation through Code

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

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

    • windowPositionHorizontal: 데이터 차트에 표시되는 콘텐츠 뷰 직사각형의 X 부분을 설명하는 숫자 값입니다.
    • windowPositionVertical: 데이터 차트에 표시되는 콘텐츠 뷰 직사각형의 Y 부분을 설명하는 숫자 값입니다.
    • windowRect: 현재 표시된 차트 부분을 나타내는 직사각형을 나타내는 Rect 객체입니다. 예를 들어 "0, 0, 1, 1"의 windowRect는 데이터 차트 전체가 됩니다.
    • windowScaleHorizontal: 데이터 차트에 표시되는 콘텐츠 뷰 직사각형의 너비 부분을 설명하는 숫자 값입니다.
    • windowScaleVertical: 데이터 차트에 표시되는 콘텐츠 뷰 직사각형의 높이 부분을 설명하는 숫자 값입니다.

    Additional Resources

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

    API References

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