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

30 Nov 2023

javascript

ApexCharts는 JavaScript로 작성된 오픈소스 차트 라이브러리입니다. 이 라이브러리는 다양한 종류의 차트를 생성하기 위한 강력한 기능을 제공합니다. 이번 포스트에서는 ApexCharts를 사용하여 막대 그래프를 생성하는 방법을 알아보겠습니다.

1. ApexCharts 설치

첫 번째 단계는 ApexCharts를 프로젝트에 설치하는 것입니다. npm을 사용하여 다음 명령어를 실행하여 ApexCharts를 설치할 수 있습니다.

npm install apexcharts

또는 HTML 파일에 직접 스크립트 태그를 추가하여 ApexCharts를 다운로드할 수도 있습니다.

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

2. 막대 그래프 설정하기

막대 그래프를 생성하기 위해 다음과 같은 단계를 따릅니다.

2.1. HTML 요소 준비

먼저, 막대 그래프가 표시될 HTML 요소를 준비합니다. 예를 들어, <div> 태그를 사용하여 그래프가 표시될 위치를 지정할 수 있습니다.

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

2.2. 데이터 준비

막대 그래프에 표시될 데이터를 준비합니다. 예를 들어, 다음과 같은 데이터 배열을 생성할 수 있습니다.

const data = [
  {
    x: 'Apple',
    y: 10
  },
  {
    x: 'Banana',
    y: 25
  },
  {
    x: 'Orange',
    y: 15
  }
];

2.3. 막대 그래프 생성

이제 ApexCharts를 사용하여 막대 그래프를 생성합니다. 다음과 같은 방법으로 그래프를 초기화하고 데이터를 설정합니다.

const options = {
  chart: {
    type: 'bar',
    height: 350
  },
  series: [{
    data: data
  }],
  xaxis: {
    type: 'category',
    categories: data.map(item => item.x)
  }
};
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

위의 코드에서 options 객체는 그래프의 속성을 정의하는 데 사용됩니다. chart 속성에서는 그래프 유형을 bar로 설정하고, height 속성으로 그래프의 높이를 지정합니다. series 속성에서는 데이터 배열을 설정하고, xaxis 속성에서는 x축의 유형을 category로 설정하고, 카테고리 배열을 map() 함수를 사용하여 설정합니다.

마지막으로, new ApexCharts()를 사용하여 그래프를 초기화하고, render() 메서드를 호출하여 그래프를 표시합니다.

3. 결과 확인하기

막대 그래프를 생성한 후, HTML 파일을 열어 그래프가 제대로 표시되는지 확인할 수 있습니다. 막대 그래프는 지정한 데이터에 따라 표시되며, 필요에 따라 여러 설정을 변경하여 원하는 그래프를 생성할 수 있습니다.