React 데이터 차트 | 데이터 시각화 도구 | 내비게이션

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

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

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

줌이 기본적으로 켜져 있는지는 사용하는 차트에 따라 다릅니다. 사용IgrCategoryChart 중이라면 기본적으로 켜져 있지만, 그IgrDataChart 모드에는 없습니다. UI에서 내비게이션을 활성화하거나 비활성화하려면, 확대를 활성화하거나 비활성화하려는 방향에 따라 차트의 속성 및isHorizontalZoomEnabled /또는isVerticalZoomEnabled 속성을 설정해야 합니다.

마우스 클릭이나 터치를 사용해 줌이나 팬도 가능합니다. 데이터 차트의 특성은defaultInteraction 마우스 클릭이나 터치 이벤트에서 일어나는 일을 결정합니다. 이 속성은 기본값이며DragZoom, 확대 기능을 활성화한 상태에서 이 설정으로 설정하면 클릭하고 드래그하면 미리보기 직사각형이 그래프 영역 위에 배치되어 차트의 확대 영역이 됩니다. 이defaultInteraction 속성은 팬닝을 허용하거나DragPan 이러한 작업을 방지하도록 설정할None 수도 있습니다.

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

이동: 키보드의 화살표 키를 사용 🡐 🡓 🡒 🡑 하거나 키를 누른 상태 SHIFT에서 마우스로 클릭하고 드래그하거나 터치를 통해 손가락을 누르고 움직입니다.
확대: 키보드의 키를 사용 PAGE UP 하거나, 마우스 휠을 위로 올리거나, 손가락을 모아 터치를 통해 확대합니다.
축소: 키보드의 키를 사용 PAGE DOWN 하거나, 마우스 휠을 아래로 굴리거나, 터치를 통해 손가락을 모아 축소합니다.
차트 플롯 영역에 맞추 기: 키보드의 키를 사용합니다 HOME. 이에 대한 마우스 또는 터치 조작은 없습니다.
에어리어 줌: 플롯 영역 내에서 마우스를 클릭하고 드래그하세요.defaultInteraction 속성이 기본값으로 설정됨 -DragZoom.

확대와 팬 조작은 각각 와dragModifier 속성을 설정panModifier 하여 수정자 키를 사용해 활성화할 수도 있습니다. 이 속성들은 다음 수정키 키로 설정할 수 있으며, 누르면 해당 연산이 실행됩니다:

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

차트는 andverticalViewScrollbarMode 속성을 활성화horizontalViewScrollbarMode 하여 스크롤할 수 있습니다.

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

Persistent- 차트가 확대된 상태에서는 스크롤바가 항상 보이고, 완전히 축소하면 사라집니다.
Fading- 스크롤바는 사용 후 사라졌다가 마우스가 근처에 있으면 다시 나타납니다.
FadeToLine- 줌을 사용하지 않을 때 스크롤바는 더 얇은 선으로 줄어듭니다.
None- 기본값으로는 스크롤바가 표시되지 않습니다.

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

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

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

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

Additional Resources

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

API References

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

React 차트 탐색

React Chart Navigation Example

Chart Navigation with User Interactions

Chart Navigation with Touch, Mouse and Keyboard

Chart Navigation with Scrollbars

Chart Navigation through Code

Additional Resources

API References