[javascript] Highcharts에서 차트 화면 확대/축소하기

27 Nov 2023

javascript

Highcharts는 자바스크립트 기반의 강력한 차트 라이브러리입니다. 이 블로그 포스트에서는 Highcharts를 사용하여 차트 화면을 확대하거나 축소하는 방법을 알아보겠습니다.

1. ZoomType 옵션 사용하기

Highcharts는 chart 객체의 zoomType 옵션을 통해 차트 화면 확대/축소를 지원합니다. 이 옵션에는 다음과 같은 값을 설정할 수 있습니다:

x: 가로로만 확대/축소 가능
y: 세로로만 확대/축소 가능
xy: 가로와 세로 모두 확대/축소 가능
none: 확대/축소 불가능

$('#container').highcharts({
    chart: {
        zoomType: 'x' // 가로로만 확대/축소 가능
    },
    // 차트 데이터 및 설정 옵션들...
});

2. RangeSelector 사용하기

Highcharts에서는 rangeSelector 옵션을 사용하여 특정 기간의 데이터를 선택하는 도구를 제공합니다. 이 도구를 사용하면 화면에 표시되는 데이터의 범위를 쉽게 조정할 수 있습니다.

$('#container').highcharts('StockChart', {
    rangeSelector: {
        enabled: true,
        selected: 1 // 초기에 표시할 기간 인덱스 (0: 전체, 1: 1주, 2: 1개월 등)
    },
    // 차트 데이터 및 설정 옵션들...
});

3. 마우스 스크롤 확대/축소 기능 추가하기

Highcharts에서는 mousewheel 이벤트를 사용하여 마우스 스크롤로 차트를 확대하거나 축소하는 기능을 추가할 수 있습니다. 이를 위해 chart.events 항목에 wheel 이벤트 핸들러를 등록합니다.

$('#container').highcharts({
    chart: {
        events: {
            wheel: function (e) {
                var delta = Highcharts.normalizeWheelDelta(e.originalEvent.deltaY),
                    chart = this;
                
                if (delta < 0) {
                    // 확대
                    chart.zoomIn();
                } else if (delta > 0) {
                    // 축소
                    chart.zoomOut();
                }
                
                return false; // 기본 스크롤 이벤트 제거
            }
        }
    },
    // 차트 데이터 및 설정 옵션들...
});

결론

Highcharts를 사용하면 차트 화면을 확대하거나 축소하는 다양한 방법을 적용할 수 있습니다. 위에서 소개한 방법들을 활용하여 사용자가 쉽게 차트를 확대/축소할 수 있는 기능을 구현해보세요. Happy coding!