ApexCharts는 JavaScript 기반의 오픈 소스 차트 라이브러리입니다. 이 라이브러리를 사용하면 다양한 유형의 그래프와 차트를 생성할 수 있습니다. 여기서는 ApexCharts를 사용하여 누적 막대 그래프를 생성하는 방법을 알아보겠습니다.

1. ApexCharts 설치하기

먼저 ApexCharts를 사용하기 위해 라이브러리를 설치해야 합니다. 아래 명령을 사용하여 NPM을 통해 ApexCharts를 설치할 수 있습니다.

npm install apexcharts

2. HTML에 그래프 컨테이너 추가하기

다음으로, 그래프를 표시할 HTML에 그래프를 표시할 컨테이너를 추가해야 합니다. 예를 들어, 다음과 같은 div 요소를 사용하여 컨테이너를 생성할 수 있습니다.

<div id="chart"></div>

3. JavaScript 코드 작성하기

그래프를 생성하고 데이터를 전달하는 JavaScript 코드를 작성해야 합니다. 아래는 예시 코드입니다.

// ApexCharts 객체 가져오기
import ApexCharts from 'apexcharts';

// 그래프 옵션 설정하기
const options = {
  chart: {
    type: 'bar',
    stacked: true,
  },
  series: [
    {
      name: '서울',
      data: [5, 10, 15, 20],
    },
    {
      name: '부산',
      data: [3, 8, 12, 18],
    },
    {
      name: '대구',
      data: [7, 14, 9, 22],
    },
  ],
  xaxis: {
    categories: ['월', '화', '수', '목'],
  },
};

// 그래프 생성하기
const chart = new ApexCharts(document.querySelector("#chart"), options);

// 그래프 렌더링하기
chart.render();

위 코드에서는 ApexCharts 객체를 가져와서 그래프의 옵션을 설정합니다. series 배열에는 누적 막대 그래프에 표시될 데이터를 지정하고, xaxis.categories에는 x축 레이블을 지정합니다. 마지막으로 그래프를 생성하고 렌더링합니다.

4. 결과 확인하기

위의 코드를 사용하여 누적 막대 그래프를 생성하고 브라우저에서 결과를 확인할 수 있습니다. 그래프 컨테이너가 있는 HTML 파일을 열어서 그래프가 올바르게 표시되는지 확인해보세요.

참고 자료

• ApexCharts 공식 문서
• ApexCharts GitHub 저장소