[javascript] ApexCharts에서 차트에 마우스 호버 이벤트 추가하기

30 Nov 2023

javascript

ApexCharts는 JavaScript로 작성된 강력한 차트 라이브러리입니다. 이 라이브러리를 사용하면 다양한 종류의 차트를 생성하고 사용자에게 시각적인 데이터를 제공할 수 있습니다. 이번에는 ApexCharts에서 차트에 마우스 호버 이벤트를 추가하는 방법에 대해 알아보겠습니다.

마우스 호버 이벤트를 포함한 차트 생성하기

먼저 ApexCharts를 웹 페이지에 로드해야 합니다. HTML 파일의 <head> 태그 안에 다음 코드를 추가하세요.

<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.28.2/dist/apexcharts.min.js"></script>

그 다음, 마우스 호버 이벤트를 포함한 차트를 생성할 div 요소를 HTML 파일에 추가하세요. 예를 들어, 다음과 같이 chart-container라는 ID를 가진 div를 추가합니다.

<div id="chart-container"></div>

JavaScript 파일에 아래 코드를 추가하여 차트를 생성하고 마우스 호버 이벤트를 추가합니다.

// ApexCharts로 차트 생성하기
var options = {
  chart: {
    type: 'line',
  },
  series: [
    {
      name: 'Series 1',
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
    }
  ],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
  }
};

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

// 마우스 호버 이벤트 추가하기
chart.addEventListener('dataPointMouseEnter', function (e, series, dataPointIndex) {
  // 마우스 호버 이벤트 발생 시 실행할 코드 작성
  console.log('Mouse entered', series.name, 'dataPointIndex:', dataPointIndex);
});

위의 코드에서 chart.addEventListener를 사용하여 dataPointMouseEnter 이벤트에 대한 핸들러를 추가합니다. 이 핸들러는 마우스가 차트 데이터 포인트 위로 이동했을 때 실행되며, 시리즈 이름과 데이터 포인트의 인덱스를 출력합니다.

추가적인 설정

ApexCharts를 통해 차트에 마우스 호버 이벤트를 추가하는 방법에 대해 알아보았습니다. 이외에도 ApexCharts는 다양한 설정과 기능을 제공합니다. 더 자세한 정보는 ApexCharts 공식 문서를 참조하세요.