[javascript] ApexCharts에서 차트에 체크박스 추가하기

30 Nov 2023

javascript

ApexCharts는 JavaScript로 구현된 강력한 차트 라이브러리입니다. 이 라이브러리를 사용하면 다양한 유형의 차트를 생성하고 데이터 시각화를 할 수 있습니다. 하지만 때로는 차트에 추가적인 기능을 넣고 싶을 때가 있습니다. 이번 포스트에서는 ApexCharts에서 차트에 체크박스를 추가하는 방법에 대해 알아보겠습니다.

ApexCharts 설치하기

우선, ApexCharts를 사용하기 위해 다음과 같이 npm을 이용하여 ApexCharts를 설치해야 합니다.

npm install apexcharts --save

HTML에 차트 그리기

먼저, HTML 파일에 차트를 그릴 div 요소를 추가해야 합니다.

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

그리고 다음과 같이 스크립트를 추가하여 차트를 그릴 준비를 합니다.

<script src="node_modules/apexcharts/dist/apexcharts.min.js"></script>

차트에 체크박스 추가하기

이제 차트에 체크박스를 추가하려면 다음과 같이 코드를 작성해야 합니다.

var options = {
  series: [{
    name: 'Series 1',
    data: [30, 40, 45, 50, 49, 60, 70, 91]
  }],
  chart: {
    height: 350,
    type: 'line',
    zoom: {
      enabled: false
    },
    toolbar: {
      show: true,
      tools: {
        selection: true
      }
    }
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    curve: 'straight'
  },
  title: {
    text: 'Line Chart with Selection',
    align: 'left'
  },
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
  }
};

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

위의 코드에서, toolbar 객체의 selection 속성을 true로 설정하여 체크박스가 보이도록 하였습니다. 이 설정을 통해 사용자가 차트 위에 사각형을 그려서 선택할 수 있는 기능을 제공합니다.

결과 확인하기

위의 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

차트에 체크박스 추가

결론

이렇게 ApexCharts에 체크박스를 추가하는 방법에 대해 알아보았습니다. 차트에 추가 기능을 넣어 사용자가 더 편리하게 데이터를 조작할 수 있도록 만들 수 있습니다. ApexCharts의 다른 기능과 함께 체크박스를 사용하여 데이터 시각화를 더욱 강력하게 만들어보세요!

참고 문서: