Angular 차트 탐색

    Ignite UI for Angular 하면 마우스, 키보드 및 터치를 통해 대화형 패닝 및 확대/축소가 가능합니다.

    Angular Chart Navigation Example

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

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

    Chart Navigation with User Interactions

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

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

    Chart Navigation with Touch, Mouse and Keyboard

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

    • 패닝: 키보드의 🡐 🡒 🡑 🡓 방향키를 사용하거나, 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 IgxDataChartComponent control.

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

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

    Additional Resources

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

    API References

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