Chart.js는 인기있는 JavaScript 라이브러리로, 다양한 종류의 차트를 웹페이지에 쉽게 표시할 수 있습니다. 이 포스트에서는 Chart.js를 사용하여 가로 차트를 생성하는 방법에 대해 알아보겠습니다.

1. Chart.js 설치

Chart.js를 사용하려면 먼저 라이브러리를 프로젝트에 설치해야 합니다. npm을 사용한다면 다음 명령어를 실행하여 설치할 수 있습니다:

npm install chart.js

혹은 CDN을 통해 직접 라이브러리를 불러올 수도 있습니다:

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

2. 가로 차트 HTML 요소 생성

가로 차트를 표시할 HTML 요소를 생성해야 합니다. 아래와 같이 <canvas> 요소를 사용하여 차트 컨테이너를 만들 수 있습니다:

<canvas id="horizontal-chart"></canvas>

3. 가로 차트 데이터 준비

가로 차트에 표시할 데이터를 JavaScript 객체나 배열 형태로 준비해야 합니다. 다음은 예시 데이터입니다:

const chartData = {
  labels: ['A', 'B', 'C', 'D', 'E'],
  datasets: [{
    label: '가로 차트',
    data: [12, 19, 3, 5, 2],
    backgroundColor: 'rgba(54, 162, 235, 0.8)',
  }]
};

4. 가로 차트 생성

이제 Chart.js를 사용하여 가로 차트를 생성할 수 있습니다. 아래는 가로 차트 생성 및 옵션 설정 예제입니다:

const ctx = document.getElementById('horizontal-chart').getContext('2d');
const horizontalChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: chartData,
  options: {
    responsive: true,
    scales: {
      x: {
        beginAtZero: true
      },
      y: {
        beginAtZero: true
      }
    }
  }
});

• ctx: <canvas> 요소의 컨텍스트를 가져옵니다.
• type: 차트의 종류를 지정합니다. 이 경우 horizontalBar로 설정하여 가로 차트를 생성합니다.
• data: 차트에 표시할 데이터를 전달합니다.
• options: 차트의 외관과 동작을 설정합니다.

5. 가로 차트 사용자 정의

Chart.js를 사용하여 생성한 가로 차트는 다양한 방식으로 사용자 정의할 수 있습니다. 자세한 내용은 Chart.js 공식 문서를 참조하세요.

이제 Chart.js를 사용하여 가로 차트를 생성하는 방법에 대해 알아보았습니다. 차트를 웹페이지에 표시해 데이터를 시각적으로 이해하기 쉽게 만들어보세요!