ApexCharts는 사용하기 쉽고 강력한 JavaScript 차트 라이브러리입니다. 이 라이브러리를 사용하여 다양한 종류의 차트를 생성할 수 있습니다. 이번 튜토리얼에서는 ApexCharts를 사용하여 차트에 드롭다운 단추를 추가하는 방법을 알아보겠습니다.

1. 드롭다운 단추 추가하기

ApexCharts에서 차트에 드롭다운 단추를 추가하려면 chart-toolbar 옵션을 사용해야 합니다. 이 옵션은 차트의 상단에 표시되는 도구 모음을 지정합니다. 다음은 드롭다운 단추를 추가하는 예시 코드입니다.

var options = {
  chart: {
    toolbar: {
      show: true
    }
  }
};

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

위의 코드에서 toolbar.show 속성을 true로 설정하여 도구 모음이 활성화되도록 합니다.

2. 드롭다운 단추에 이벤트 추가하기

드롭다운 단추를 클릭하면 원하는 작업을 수행하도록 이벤트를 추가할 수 있습니다. 이벤트는 toolbar.customButtons 옵션을 사용하여 지정할 수 있습니다. 다음은 드롭다운 단추 클릭 시 얼럿을 띄우는 예시 코드입니다.

var options = {
  chart: {
    toolbar: {
      show: true,
      customButtons: [{
        icon: '<i class="fa fa-search"></i>',
        onClick: function() {
          alert("드롭다운 단추를 클릭했습니다!");
        }
      }]
    }
  }
};

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

위의 코드에서 toolbar.customButtons 속성을 사용하여 아이콘과 클릭 이벤트를 정의했습니다. 드롭다운 단추를 클릭하면 얼럿이 표시됩니다.

3. 추가 설정 및 커스터마이징

ApexCharts는 다양한 설정 및 커스터마이징 옵션을 제공합니다. toolbar 옵션을 사용하여 도구 모음의 위치, 배경색, 툴팁 등을 조정할 수 있습니다. 자세한 내용은 ApexCharts 공식 문서를 참조하세요.

결론

ApexCharts를 사용하여 차트에 드롭다운 단추를 추가하는 방법을 알아보았습니다. 이를 통해 사용자가 원하는 작업을 쉽게 수행할 수 있는 인터랙티브한 차트를 생성할 수 있습니다. ApexCharts의 다양한 설정 옵션을 적용하여 차트를 원하는 대로 커스터마이징할 수 있습니다.