문서 › 상호작용과 내보내기
확대와 이동
드래그·휠·핀치로 구간 확대, 더블클릭으로 원래대로. 무료.
zoom: true 를 주면 선·영역·세로 막대·산점도의 x 범위를 확대할 수 있습니다. 다른 라이브러리에서 유료 등급에 있는 기능입니다. 아래 차트에서 마우스로 구간을 끌어 보세요.
움직이는 예제
차트를 누르거나 키보드로 움직여 보세요.
이 예제의 코드
const chart = createChart('#chart', {
type: 'area',
title: '10월 방문',
zoom: true,
data: {
labels: ['1일', '2일', '3일', '4일', '5일', '6일', '7일', '8일', '9일', '10일', '11일', '12일', '13일', '14일', '15일', '16일', '17일', '18일', '19일', '20일', '21일'],
series: [
{ name: '방문자', data: [1820, 2140, 1990, 2410, 2290, 1650, 1580, 2010, 2380, 2550, 2470, 2620, 1910, 1840, 2230, 2680, 2810, 2740, 2950, 2100, 2060] },
{ name: '가입', data: [120, 156, 131, 188, 171, 98, 92, 140, 176, 205, 190, 214, 121, 117, 163, 221, 240, 228, 262, 141, 136] },
],
},
});
chart.on('zoom', (e) => log(e ?? '원래 크기'));| 동작 | 마우스 | 터치 | 키보드 |
|---|---|---|---|
| 구간 확대 | 끌어서 범위 고르기 | 두 손가락 벌리기 | + |
| 축소 | Ctrl(⌘)+휠 | 두 손가락 오므리기 | - |
| 옆으로 이동 | Shift+끌기, 가로 휠, Shift+휠 | 확대한 뒤 한 손가락으로 끌기 | 끝에서 ←/→ |
| 원래대로 | 더블클릭, "원래 크기로" 단추, ⋯ 메뉴 | "원래 크기로" 단추 | 0 |
- 그냥 휠은 페이지 스크롤을 막지 않습니다. 확대는 Ctrl(⌘)과 함께일 때만입니다.
- 확대 범위는
zoom이벤트로{ start, end }(x 인덱스), 원래대로 돌아오면null이 옵니다. - 코드로 되돌리기:
chart.resetZoom(). 데이터나 종류를 바꾸면 확대는 풀립니다. - x 값이 3개 이상일 때만 동작하고, 가로 막대에서는 꺼집니다.