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

30 Nov 2023

javascript

ApexCharts는 JavaScript로 작성된 경량 차트 라이브러리입니다. 이 라이브러리를 사용하여 웹 애플리케이션에서 선 그래프를 생성할 수 있습니다. 이번 글에서는 ApexCharts를 사용하여 선 그래프를 생성하는 방법에 대해 알아보겠습니다.

ApexCharts 설치하기

우선 ApexCharts를 설치해야 합니다. 다음의 명령어를 사용하여 npm으로 ApexCharts를 설치하세요.

npm install apexcharts

선 그래프 생성하기

선 그래프를 생성하기 위해서는 HTML 파일에 ApexCharts 라이브러리를 로드하고, 그래프를 그릴 div 요소를 추가해야 합니다.

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

  <script>
    const options = {
      series: [{
        name: 'Data',
        data: [30, 40, 45, 50, 49, 60, 70, 91]
      }],
      chart: {
        type: 'line',
        height: 350
      },
      xaxis: { categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }
    };

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

위의 코드는 ApexCharts를 로드하고 chart라는 id를 가지는 div 요소를 추가한 예제입니다. 그래프를 그리기 위해 데이터와 그래프 유형, 그래프 높이 등의 옵션이 정의되어 있습니다.

series 배열에는 그래프에 표시될 데이터가 포함되어 있으며, xaxis는 x축의 카테고리 목록을 지정합니다.

마지막으로, new ApexCharts()를 사용하여 chart 요소를 선택하고 옵션을 전달해 그래프를 생성합니다.

결론

이번 글에서는 ApexCharts를 사용하여 선 그래프를 생성하는 방법을 알아보았습니다. ApexCharts는 다양한 차트 유형을 지원하고 사용하기 쉽기 때문에 웹 애플리케이션에서 데이터 시각화를 위해 많이 사용되고 있습니다. 추가적인 정보는 ApexCharts 공식 문서를 참고하세요.