본문 바로가기
Front-End/highcharts

[Highcharts] Zooming

by SeanK 2022. 5. 12.

 

Zooming

HIGHCHARTS BASIC

Highcharts에서 줌잉은 x축 y축에서 각각 할 수 있다. chart.zoomType 옵션은 x, y, 혹은 xy로 설정된다. 

마우스 포인터로 줌잉은 차트에 사각형 모양으로 드래깅을 하면서 실행된다. 만약 chart.panKey가 설정되어 있다면, 사용자는 키를 누르고 마우스를 드래그해 줌잉 할 수 있다. 그렇지 않다면, 사용자는 줌잉된 영역에서 줌잉할 수 없고 새로 다시 줌잉을 해야 한다. 

줌잉을 할 때, 사용자가 줌아웃 할 수 있도록 하는 버튼이 표시된다. 프로그래밍적으로, Chart.zoomOut 함수가 같은 효과를 낼 수 있다. 

터치 장비에서 사용자는 차트 영역을 집어서 줌잉할 수 있다. 다른 디바이스에서는 한 손가락으로 차트를 이동하면서 줌잉된 영역을 이동시킬 수 있다. 

y축은 x축과는 달리 기본설정으로 줌잉되지 않는다. 이 기능은 축의 startOnTick 그리고 endOnTick 설정이 false일 경우 활성화된다.

 

HIGHCHARTS STOCK

Highcharts Stock에서는 네비게이션을 돕는 Navigator, Range Selector, 그리고 Scrollbar가 있기 때문에 줌잉기능은 기본 설정이 disabled이다. 대신, 줌잉된 영역을 옮기는 패닝은 enabled이다. 

 

'Front-End > highcharts' 카테고리의 다른 글

[Highcharts] Drill down  (0) 2022.05.13
[Highcharts] Labels and string formatting  (0) 2022.05.13
[Highcharts] Plot bands and plot lines  (0) 2022.05.12
[Highcharts] Scrollbars  (0) 2022.05.12
[Highcharts] Legend  (0) 2022.05.12