줌(Zoom)

RealChart zoom은 body.zoomType으로 켠다. 기본값은 'none'이며, 보통 'x'를 지정한다.

const config = {
    body: {
        zoomType: 'x',
    },
};

마우스에서는 plot을 드래그해 사각형을 그려 zoom한다. zoom되면 zoomButton이 나타나 원래 범위로 돌아갈 수 있다. 프로그램에서는 축의 resetZoom()으로 같은 효과를 낼 수 있다. 마우스 사각형 zoom과 터치 pinch는 이 body에 연결된 축을 모두 대상으로 한다. x축이 여러 개면 함께 범위가 바뀐다. 마우스 zoom 예제는 Axis Zooming 데모를 참조한다.

터치 디바이스

터치에서는 plot에서 두 손가락 pinch로 zoom한다. 줌된 영역은 두 손가락으로 옮길 수 있다. 터치에서는 사각형 드래그 zoom을 쓰지 않는다(마우스로만 동작한다).

tooltip.followTouch가 true(기본)이면 1손가락은 툴팁이 가져가므로, pinch·pan은 두 손가락이 필요하다. 1손가락 pan을 쓰려면 followTouch를 false로 두고, 이미 zoom된 상태에서 한 손가락으로 민다. 줌되지 않은 plot에서는 세로 페이지 스크롤이 된다.

const config = {
    body: {
        zoomType: 'x',
    },
    tooltip: {
        followTouch: true, // 기본. pinch·pan은 두 손가락
    },
};

polar 차트에서는 pinch·pan이 적용되지 않는다. navigator와 축 scrollbar는 기존처럼 한 손가락 드래그로 조작한다.

툴팁 sticky·탭 동작은 툴팁을 참조한다.

줌(Zoom)

터치 디바이스

설정

See Also