[javascript] ApexCharts에서 차트에 다중 시리즈 그래프 생성하기

30 Nov 2023

javascript

ApexCharts는 다양한 유형의 차트를 생성하는데 사용되는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 웹 애플리케이션에서 다중 시리즈 그래프를 손쉽게 생성할 수 있습니다. 이번 블로그 포스트에서는 ApexCharts를 사용하여 다중 시리즈 그래프를 생성하는 방법에 대해 알아보겠습니다.

1. ApexCharts 설치하기

ApexCharts를 사용하기 위해선, 먼저 ApexCharts 라이브러리를 설치해야 합니다. NPM을 사용한다면, 다음 명령어를 사용하여 ApexCharts를 설치할 수 있습니다:

npm install apexcharts --save

만약, CDN을 사용한다면, HTML 파일의 <head> 태그 안에 다음 스크립트 태그를 추가하면 됩니다:

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

2. ApexCharts로 다중 시리즈 그래프 생성하기

다중 시리즈 그래프를 생성하기 위해선, Chart 클래스의 인스턴스를 생성하고 데이터를 설정해야 합니다. 다음은 ApexCharts로 다중 시리즈 그래프를 생성하는 예제 코드입니다:

// HTML 파일에서 차트를 표시할 요소 선택하기
const chartContainer = document.querySelector('#chart-container');

// 차트 데이터
const chartData = {
  series: [
    {
      name: 'Series 1',
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
    },
    {
      name: 'Series 2',
      data: [23, 55, 25, 45, 56, 63, 68, 92, 110]
    }
  ],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
  }
};

// 차트 설정
const chartOptions = {
  chart: {
    type: 'line'
  },
  series: chartData.series,
  xaxis: chartData.xaxis
};

// ApexCharts 인스턴스 생성
const chart = new ApexCharts(chartContainer, chartOptions);

// 차트 그리기
chart.render();

위의 코드를 실행하면, 시리즈 1과 시리즈 2의 데이터를 가지고 있는 다중 시리즈 라인 차트가 생성됩니다.

3. 차트 스타일링하기

ApexCharts를 사용하여 생성한 차트는 CSS를 사용하여 스타일링할 수 있습니다. 차트의 색상, 라인 굵기, 레이아웃 등을 사용자가 원하는대로 변경할 수 있습니다. 자세한 스타일링 옵션은 ApexCharts의 문서를 참조하십시오.

4. 마무리

ApexCharts를 사용하여 다중 시리즈 그래프를 생성하는 방법에 대해 알아보았습니다. ApexCharts는 다양한 차트 유형과 많은 기능을 제공하므로, 웹 애플리케이션에서 데이터 시각화에 사용할 수 있는 강력한 도구입니다.

참고문서: