[javascript] ApexCharts에서 차트에 클릭 이벤트 추가하기

30 Nov 2023

javascript

ApexCharts은 강력한 시각화 라이브러리로, 다양한 종류의 차트를 만들 수 있습니다. 이 라이브러리를 사용하여 차트에 클릭 이벤트를 추가하는 방법을 알아보겠습니다.

1. ApexCharts 라이브러리 포함하기

ApexCharts를 사용하기 위해서는 우선 ApexCharts 라이브러리를 포함해야 합니다. HTML 문서 내에 다음과 같이 스크립트 태그를 추가합니다.

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

2. 차트 생성하기

클릭 이벤트를 추가할 차트를 생성합니다. 예를 들어, 막대 그래프를 생성하려면 다음과 같이 div 요소를 추가합니다.

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

3. 클릭 이벤트 핸들러 만들기

클릭 이벤트가 발생했을 때 실행할 핸들러 함수를 만듭니다. 이 함수는 차트와 클릭한 데이터 포인트에 대한 정보를 매개변수로 받습니다. 예를 들어, 막대 그래프에서 클릭한 데이터 포인트의 값을 콘솔에 표시하는 핸들러 함수는 다음과 같이 작성할 수 있습니다.

function handleClick(event, chartContext, { seriesIndex, dataPointIndex, w }) {
  const clickedDataPoint = chartContext.w.globals.series[seriesIndex][dataPointIndex];
  console.log("Clicked data point:", clickedDataPoint);
}

4. 차트에 클릭 이벤트 등록하기

이제 생성한 차트에 클릭 이벤트를 등록합니다. new ApexCharts()를 사용하여 차트를 초기화하고 chart.render() 메서드를 사용하여 차트를 렌더링합니다. chart.rendered() 이벤트 리스너를 사용하여 차트가 렌더링된 후에 클릭 이벤트를 등록합니다.

document.addEventListener("DOMContentLoaded", function(event) {
  const options = {
    chart: {
      id: "chart",
      events: {
        click: handleClick
      }
    },
    series: [
      {
        data: [10, 20, 30, 40, 50]
      }
    ],
    xaxis: {
      categories: ["A", "B", "C", "D", "E"]
    }
  };
  
  const chart = new ApexCharts(document.querySelector("#chart"), options);
  
  chart.render().then(function() {
    chart.updateOptions({
      plotOptions: {
        bar: {
          distributed: true
        }
      }
    });
  });
});

결론

ApexCharts를 사용하여 차트에 클릭 이벤트를 추가하는 방법을 알아보았습니다. 이를 통해 사용자의 상호작용에 따라 동적으로 차트를 제어할 수 있습니다. 자세한 내용은 ApexCharts 공식 문서를 참조하십시오.