[javascript] Chart.js를 활용한 인구 통계 데이터 시각화

27 Nov 2023

javascript

이 글에서는 Chart.js 라이브러리를 사용하여 인구 통계 데이터를 시각화하는 방법을 알아보겠습니다. Chart.js는 HTML5 캔버스를 활용하여 다양한 종류의 그래프를 생성하는 데 사용되는 유용한 자바스크립트 라이브러리입니다.

Chart.js 소개

Chart.js는 사용하기 쉽고 강력한 그래프 라이브러리로, 다양한 종류의 그래프를 생성할 수 있습니다. 다양한 유형의 그래프(막대 그래프, 선 그래프, 원 그래프 등)를 사용하여 데이터를 시각화할 수 있습니다. 인터랙티브한 기능과 모바일 환경에서도 잘 작동하는 반응형 디자인을 제공합니다.

준비물

인구 통계 데이터를 시각화하기 위해 다음과 같은 준비물이 필요합니다.

HTML 문서
Chart.js 라이브러리 (CDN을 통해 가져올 수 있습니다)
데이터셋

설치

Chart.js를 사용하기 위해, CDN을 통해 라이브러리를 추가로 가져와야 합니다. 아래의 스크립트 태그를 HTML 문서의 <head> 태그 내에 추가하세요.

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

HTML 구조

그래프를 표시할 HTML 요소를 준비해야 합니다. <canvas> 태그를 사용하여 캔버스 요소를 생성하세요. 캔버스는 그래프가 그려질 영역을 나타냅니다. 다음은 캔버스 요소의 예입니다.

<canvas id="myChart" width="400" height="400"></canvas>

자바스크립트 설정

그래프를 생성하고 데이터를 설정하기 위해 자바스크립트 코드를 작성해야 합니다. 다음은 간단한 자바스크립트 코드 예시입니다.

// 캔버스 요소 가져오기
const canvas = document.getElementById('myChart').getContext('2d');

// 데이터셋 생성
const data = {
  labels: ['남자', '여자'],
  datasets: [{
    label: '성별 인구',
    data: [50, 70],
    backgroundColor: ['#FF6384', '#36A2EB'],
  }]
};

// 차트 생성
const myChart = new Chart(canvas, {
  type: 'bar',
  data: data
});

위의 코드에서는 labels 배열에 성별을 나타내는 레이블을, data 배열에 각 성별의 인구 값을, backgroundColor 속성에 그래프의 색상을 설정하였습니다.

그래프 타입

Chart.js는 다양한 타입의 그래프를 지원합니다. 위의 예시에서는 막대 그래프를 사용하였지만, 다른 타입의 그래프를 생성하려면 type 속성 값을 변경하면 됩니다. 예를 들어, 선 그래프를 생성하려면 type: 'line'으로 설정하면 됩니다.

결과 확인하기

위의 코드를 모두 작성한 후, 웹 브라우저에서 HTML 파일을 열어 그래프가 제대로 표시되는지 확인할 수 있습니다.

마무리

이번 글에서는 Chart.js를 사용하여 인구 통계 데이터를 시각화하는 방법에 대해 알아보았습니다. Chart.js는 다양한 종류의 그래프를 생성할 수 있고, 사용하기도 쉽기 때문에 데이터 시각화 작업에 매우 유용합니다. Chart.js 공식 문서를 참고하여 더 많은 기능을 살펴보세요.

참고 자료:

Chart.js 공식 문서: https://www.chartjs.org/docs/latest/
Chart.js GitHub 저장소: https://github.com/chartjs/Chart.js