ApexCharts는 JavaScript로 작성된 강력하고 반응형 그래프 라이브러리입니다. 이 라이브러리를 사용하면 다양한 종류의 그래프를 쉽게 생성할 수 있습니다. 이번 포스트에서는 ApexCharts를 사용하여 가로 막대 그래프를 생성하는 방법에 대해 알아보겠습니다.

1. ApexCharts 라이브러리 설치하기

먼저, ApexCharts를 사용하기 위해 라이브러리를 설치해야 합니다. 다음 명령을 사용하여 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',
    width: '100%',
    height: 'auto',
    toolbar: {
      show: false,
    }
  },
  plotOptions: {
    bar: {
      horizontal: true,
    }
  },
  series: [{
    name: '막대 그래프',
    data: [30, 50, 40, 60, 70, 90]
  }],
  xaxis: {
    categories: ['항목 1', '항목 2', '항목 3', '항목 4', '항목 5', '항목 6'],
  }
};

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

4. 가로 막대 그래프 확인하기

이제 HTML 파일을 브라우저에서 열어 가로 막대 그래프를 확인할 수 있습니다. 각 항목의 값을 나타내는 가로 막대가 그려질 것입니다.

참고 자료

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