[javascript] ApexCharts에서 영역 그래프 생성하기

30 Nov 2023

javascript

소개

ApexCharts는 JavaScript로 작성된 오픈 소스 차트 라이브러리입니다. 이 라이브러리를 사용하면 사용자 친화적인 인터페이스를 통해 다양한 종류의 그래프를 생성할 수 있습니다. 이번 글에서는 ApexCharts를 사용하여 영역 그래프를 생성하는 방법에 대해 알아보겠습니다.

설치

ApexCharts를 사용하기 위해 먼저 해당 라이브러리를 다운로드하거나 CDN을 통해 가져와야 합니다. 아래 예시는 CDN을 통해 ApexCharts를 가져오는 방법입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>ApexCharts Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.27.1/dist/apexcharts.min.css">
  <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.27.1/dist/apexcharts.min.js"></script>
</head>
<body>
  <div id="chart"></div>
  <script src="app.js"></script>
</body>
</html>

영역 그래프 생성하기

다음은 ApexCharts를 사용하여 영역 그래프를 생성하는 예시 코드입니다.

// HTML의 chart 요소를 선택합니다.
const chartElement = document.querySelector("#chart");

// 영역 그래프의 설정을 정의합니다.
const options = {
  chart: {
    type: 'area',
    height: 400,
  },
  series: [{
    name: 'Series 1',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  }],
  xaxis: {
    categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9']
  }
};

// 설정과 chart를 통해 영역 그래프 인스턴스를 생성합니다.
const chart = new ApexCharts(chartElement, options);

// 생성한 그래프를 렌더링합니다.
chart.render();

위의 코드에서 chartElement에는 HTML의 id가 “chart”인 요소를 선택합니다. options 객체에는 영역 그래프의 설정을 정의합니다. 예시에서는 series 배열에 하나의 시리즈만 포함되어 있지만, 필요에 따라 여러 시리즈를 추가할 수 있습니다. xaxis 객체에는 x축의 라벨을 정의합니다.

마지막으로, chartElement와 options를 인자로 하여 ApexCharts 클래스의 인스턴스를 생성하고, render() 메서드를 호출하여 그래프를 렌더링합니다.

결론

이번 글에서는 ApexCharts를 사용하여 영역 그래프를 생성하는 방법에 대해 알아보았습니다. ApexCharts는 다양한 종류의 그래프를 생성할 수 있는 강력한 라이브러리이므로, 다양한 데이터 시각화에 활용할 수 있습니다. ApexCharts 공식 문서에서 더 많은 정보를 찾아보시기 바랍니다.

참고 문서

ApexCharts 공식 문서