ApexCharts는 JavaScript로 작성된 상호작용적인 차트 라이브러리입니다. 이 라이브러리를 사용하여 웹 애플리케이션에서 다양한 종류의 차트를 생성하고 사용자와 상호작용할 수 있습니다.

이번에는 ApexCharts에서 마우스 휠을 사용하여 차트를 줌하는 방법에 대해 알아보겠습니다.

ApexCharts 줌 옵션 활성화

ApexCharts에서 마우스 휠 줌을 활성화하기 위해서는 zoom 옵션을 설정해야 합니다. 이를 위해 다음과 같이 차트의 옵션 객체를 생성하고 zoom: {} 속성을 추가합니다.

var options = {
  chart: {
    zoom: {},
  },
  // 다른 차트 옵션 설정...
};

var chart = new ApexCharts(document.querySelector("#chartContainer"), options);
chart.render();

위 코드에서 #chartContainer는 ApexCharts가 생성될 HTML 요소의 ID입니다. 이 부분을 프로젝트의 실제 요소 ID로 변경해야 합니다.

마우스 휠 줌 설정

마우스 휠 줌을 설정하려면 zoom 객체의 속성을 사용하여 필요한 옵션을 지정할 수 있습니다. 아래는 주요 옵션의 예시입니다.

enabled 옵션

enabled 옵션은 마우스 휠 줌 기능을 활성화 또는 비활성화하는 데 사용됩니다. 기본값은 false이므로 이 값을 true로 설정하여 마우스 휠 줌을 활성화할 수 있습니다.

var options = {
  chart: {
    zoom: {
      enabled: true,
    },
  },
  // 다른 차트 옵션 설정...
};

type 옵션

type 옵션은 마우스 휠 동작 유형을 설정하는 데 사용됩니다. 사용할 수 있는 값은 x, y, 또는 xy입니다. 기본값은 x이며, xy를 설정하면 x축과 y축 모두에 대해 마우스 휠 줌을 적용할 수 있습니다.

var options = {
  chart: {
    zoom: {
      enabled: true,
      type: 'xy',
    },
  },
  // 다른 차트 옵션 설정...
};

zoomedArea 옵션

zoomedArea 옵션은 마우스 휠 줌을 적용할 수 있는 최대 영역을 제한하는 데 사용됩니다. 이를 통해 사용자는 특정 범위 내에서만 마우스 휠을 사용하여 줌을 조작할 수 있습니다.

var options = {
  chart: {
    zoom: {
      enabled: true,
      zoomedArea: {
        enabled: true,
        maxToChange: 2,
      },
    },
  },
  // 다른 차트 옵션 설정...
};

maxToChange 속성은 사용자가 줌을 적용할 수 있는 최대 영역을 지정합니다. 이 값을 더 작게 설정하면 사용자가 치우쳐진 데이터를 볼 수 있게 됩니다.

차트에 마우스 휠 줌 적용

위에서 설정한 옵션으로 마우스 휠 줌을 적용하기 위해 차트를 다시 렌더링합니다. 아래 예시 코드에서는 render 함수가 호출되었다고 가정합니다.

chart.render();

결론

ApexCharts에서 마우스 휠을 사용하여 차트를 줌하는 방법에 대해 알아보았습니다. 위에서 설명한 옵션을 사용하면 사용자가 마우스 휠을 사용하여 차트에 쉽게 줌을 적용할 수 있습니다. 자세한 설정 방법은 ApexCharts 공식 문서를 참조하시기 바랍니다.