[javascript] ApexCharts에서 차트에 툴바 추가하기

30 Nov 2023

javascript

ApexCharts는 매우 강력하고 사용하기 쉬운 JavaScript 차트 라이브러리입니다. 이 라이브러리를 사용하면 다양한 종류의 차트를 생성하고 사용자 정의할 수 있습니다. 이번에는 ApexCharts를 사용하여 차트에 툴바를 추가하는 방법에 대해 소개하겠습니다.

1. ApexCharts 설치하기

먼저, ApexCharts를 설치해야 합니다. 다음 명령을 사용하여 npm을 통해 ApexCharts를 설치합니다.

npm install apexcharts --save

2. HTML 파일에 스크립트 추가하기

ApexCharts를 사용하기 위해 HTML 파일에 다음 스크립트를 추가합니다.

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

3. 툴바 옵션 설정하기

차트에 툴바를 추가하기 위해 툴바 옵션을 설정해야 합니다. 다음 코드를 참고하여 툴바 옵션을 설정합니다.

var options = {
  chart: {
    toolbar: {
      show: true,
      tools: {
        download: true,
        selection: true,
        zoom: true,
        zoomin: true,
        zoomout: true,
        pan: true,
        reset: true,
      },
    },
  },
};

4. 차트에 툴바 적용하기

ApexCharts의 options 객체에 툴바 옵션을 설정한 후, 차트를 생성하고 툴바를 적용합니다. 아래의 예제 코드를 참고하여 툴바를 적용하는 방법을 이해할 수 있습니다.

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

완성된 예제 코드

다음은 툴바가 추가된 ApexCharts 차트를 보여주는 완성된 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <title>ApexCharts 툴바 예제</title>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.28.3/dist/apexcharts.min.js"></script>
</head>
<body>
  <div id="chart"></div>

  <script>
    var options = {
      chart: {
        toolbar: {
          show: true,
          tools: {
            download: true,
            selection: true,
            zoom: true,
            zoomin: true,
            zoomout: true,
            pan: true,
            reset: true,
          },
        },
      },
    };

    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();
  </script>
</body>
</html>

이제 위의 예제 코드를 사용하여 ApexCharts에 툴바를 추가할 수 있는 방법을 알게 되었습니다. 이를 기반으로 웹 애플리케이션을 개발할 때 차트에 툴바를 유용하게 사용할 수 있습니다.

참고 자료

ApexCharts 공식 문서