[javascript] Chart.js에서의 히스토그램 생성 방법

27 Nov 2023

javascript

히스토그램은 데이터의 분포를 시각적으로 나타내는데 사용되는 그래프입니다. Chart.js는 HTML5의 Canvas를 기반으로 동작하는 JavaScript 라이브러리로, 다양한 종류의 그래프를 생성할 수 있습니다.

1. Chart.js 라이브러리 가져오기

히스토그램을 생성하기 위해 우선 Chart.js 라이브러리를 사용할 수 있도록 가져와야 합니다. 라이브러리를 다운로드하거나 CDN을 이용하여 가져올 수 있습니다.

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

2. Canvas 요소 생성하기

Chart.js는 그래프를 그릴 HTML의 Canvas 요소가 필요합니다. 히스토그램을 그릴 Canvas 요소를 HTML에 추가합니다.

<canvas id="histogramChart"></canvas>

3. 히스토그램 데이터 준비하기

히스토그램을 생성하기 위해 데이터를 준비해야 합니다. 히스토그램은 각 데이터의 빈도를 표시하는 막대 그래프로 나타내기 때문에, 데이터의 빈도를 계산해야 합니다.

const data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];  // 데이터 배열 예시
const binSize = 10;  // 빈도를 계산할 구간 크기 (bin size)
const bins = [];  // 빈도를 저장할 배열

for (let i = 0; i <= 100; i += binSize) {
  const count = data.filter(value => value >= i && value < i + binSize).length;
  bins.push(count);
}

4. 히스토그램 그래프 생성하기

Chart.js를 사용하여 히스토그램 그래프를 생성합니다. new Chart()를 사용하여 인스턴스를 생성하고, 생성된 인스턴스에 Canvas 요소와 데이터를 설정합니다.

const ctx = document.getElementById('histogramChart').getContext('2d');

const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: bins.map((_, index) => index * binSize + '-' + ((index + 1) * binSize)),
    datasets: [{
      label: '빈도',
      data: bins,
      backgroundColor: 'rgba(54, 162, 235, 0.5)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    scales: {
      x: {
        title: {
          display: true,
          text: '빈도 구간'
        }
      },
      y: {
        title: {
          display: true,
          text: '빈도'
        }
      }
    }
  }
});

5. 히스토그램 그래프 확인하기

위의 코드를 실행하고 웹 페이지에서 히스토그램 그래프를 확인해보세요. 데이터의 빈도를 시각적으로 파악할 수 있습니다.

히스토그램은 데이터 분포를 파악하는 데 유용한 그래프입니다. Chart.js를 사용하여 간단하게 히스토그램을 생성할 수 있습니다. Chart.js의 다양한 옵션을 사용하면 그래프의 스타일을 변경하거나 추가적인 기능을 구현할 수도 있습니다.

히스토그램 생성에 대한 더 자세한 내용은 Chart.js 공식 문서를 참고해주세요.