[javascript] Highcharts에서 차트 이벤트 등록하기

27 Nov 2023

javascript

Highcharts는 많은 기능을 제공하는 자바스크립트 차트 라이브러리입니다. 이 라이브러리를 사용하면 다양한 종류의 차트를 생성하고 사용자와 상호작용할 수 있습니다. 이 글에서는 Highcharts에서 차트 이벤트를 등록하는 방법에 대해 알아보겠습니다.

이벤트 등록하기

Highcharts에서 차트 이벤트를 등록하려면 chart.events 속성을 사용해야 합니다. 이 속성에는 다양한 이벤트 함수들을 등록할 수 있습니다. 예를 들어 차트를 클릭한 후 어떤 작업을 수행하고 싶다면 click 이벤트를 등록할 수 있습니다.

Highcharts.chart('container', {
  chart: {
    events: {
      click: function(event) {
        // 클릭 이벤트 발생 시 실행될 코드 작성
      },
      load: function() {
        // 차트 로딩 완료 시 실행될 코드 작성
      }
    }
  },
  // 차트 옵션 설정
  //...
});

위의 예제에서 click 이벤트와 load 이벤트를 등록하고 있습니다. 이벤트 함수 내부에 작성된 코드는 해당 이벤트가 발생했을 때 실행됩니다.

이벤트 함수의 매개변수

이벤트 함수는 매개변수를 받을 수 있습니다. click 이벤트의 경우 event 매개변수를 받습니다. 이 매개변수를 이용해서 사용자가 클릭한 위치나 클릭한 요소 등에 대한 정보를 얻을 수 있습니다.

Highcharts.chart('container', {
  chart: {
    events: {
      click: function(event) {
        console.log('클릭 위치:', event.clientX, event.clientY);
      }
    }
  },
  // 차트 옵션 설정
  //...
});

위의 예제에서는 사용자가 차트를 클릭한 위치를 콘솔에 출력하고 있습니다. event.clientX, event.clientY를 통해 클릭한 위치의 좌표를 얻을 수 있습니다.

참고 자료

이제 Highcharts에서 차트 이벤트를 등록하는 방법에 대해 알아보았습니다. 이를 통해 보다 동적이고 상호작용적인 차트를 구현할 수 있습니다. Highcharts 공식 문서와 예제들을 참고하여 더 다양한 기능을 활용해보세요.