[javascript] ApexCharts에서 차트 유형 설정하기

30 Nov 2023

javascript

ApexCharts는 JavaScript 기반의 오픈 소스 차트 라이브러리로, 다양한 유형의 차트를 생성하고 사용자 정의할 수 있습니다. 이 글에서는 ApexCharts를 사용하여 차트의 유형을 설정하는 방법을 알아보겠습니다.

차트 생성하기

먼저 ApexCharts를 설치하고 사용할 HTML 페이지에 차트를 생성해야 합니다. 아래는 기본적인 차트 생성 코드입니다.

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.28.0/dist/apexcharts.min.js"></script>
</head>
<body>
  <div id="chart"></div>

  <script>
    var options = {
      chart: {
        type: 'bar',
        height: 400
      },
      series: [{
        name: 'sales',
        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"), options);
    chart.render();
  </script>
</body>
</html>

위 코드에서는 type 속성을 'bar'로 설정하여 수직 막대형 차트를 생성하였습니다.

차트 유형 변경하기

차트 유형을 변경하려면 options 객체의 chart 속성의 type 값을 변경하면 됩니다. 다양한 유형의 차트가 가능하므로 원하는 차트 유형에 맞게 값을 설정하면 됩니다.

예를 들어, 선 그래프로 변경하려면 type 값을 'line'으로 설정하면 됩니다. 아래 코드는 선 그래프로 차트를 생성하는 예시입니다.

var options = {
  chart: {
    type: 'line',
    height: 400
  },
  series: [{
    name: 'sales',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  }],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
  }
}

위 코드에서는 type 속성을 'line'으로 설정하여 선 그래프를 생성하였습니다.

차트 생성하기

차트 유형 변경하기

참고 자료