[javascript] ApexCharts에서 시간대 막대 그래프 생성하기

30 Nov 2023

javascript

ApexCharts는 JavaScript로 작성된 시각화 라이브러리로써, 다양한 종류의 그래프를 손쉽게 생성할 수 있습니다. 이번 글에서는 ApexCharts를 사용하여 시간대 막대 그래프를 생성하는 방법을 알아보겠습니다.

1. ApexCharts 설치하기

먼저 ApexCharts를 사용하기 위해서는 해당 라이브러리를 설치해야 합니다. ApexCharts는 CDN을 통해 제공되므로, 아래의 코드를 HTML 문서의 <head> 태그 안에 추가하여 설치할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

2. 데이터 준비하기

시간대 막대 그래프를 생성하기 위해서는 그래프에 표시될 데이터를 준비해야 합니다. 예를 들어, 아래와 같이 시간별 매출 데이터를 가지고 있는 배열을 생성합니다.

const salesData = [
  { x: '08:00', y: 300 },
  { x: '09:00', y: 400 },
  { x: '10:00', y: 200 },
  // ...
];

3. 그래프 생성하기

ApexCharts를 사용하여 시간대 막대 그래프를 생성하는 방법은 아래와 같습니다.

const options = {
  chart: {
    type: 'bar',
    height: 350
  },
  series: [
    {
      name: '매출',
      data: salesData
    }
  ],
  xaxis: {
    type: 'datetime',
    categories: salesData.map(data => data.x)
  },
  yaxis: {
    title: {
      text: '매출'
    }
  }
};

const chart = new ApexCharts(document.querySelector('#chartContainer'), options);
chart.render();

위의 코드를 통해 #chartContainer라는 ID를 가진 HTML 요소에 시간대 막대 그래프를 생성할 수 있습니다. 그래프의 높이는 350px로 설정되었으며, series 속성에는 위에서 생성한 데이터 배열을 전달합니다. xaxis 속성에서는 X축의 데이터 유형을 datetime으로 설정하고, categories 속성에는 X축의 레이블을 설정합니다.

마무리

이제 ApexCharts를 이용하여 시간대 막대 그래프를 생성하는 방법을 알아보았습니다. ApexCharts는 다양한 그래프 유형을 지원하므로 필요에 맞게 다양한 그래프를 생성할 수 있습니다. 더 자세한 정보는 ApexCharts 공식 문서를 참고하시기 바랍니다.

참고 자료: