Chart.js는 HTML5의 canvas 엘리먼트를 사용하여 다양한 종류의 차트를 그릴 수 있는 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하면 사회경제 통계 자료를 시각화하여 직관적으로 이해할 수 있는 차트를 제작할 수 있습니다.

설치

Chart.js를 사용하기 위해서는 먼저 라이브러리를 다운로드하거나 CDN을 통해 불러와야 합니다. 아래는 CDN을 통해 Chart.js를 불러오는 예시입니다.

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

기본 차트 생성

Chart.js를 이용하여 기본적인 차트를 생성하는 방법은 매우 간단합니다. 다음은 막대그래프를 생성하는 예시입니다.

<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['1월', '2월', '3월', '4월', '5월'],
        datasets: [{
            label: '매출',
            data: [1000, 2000, 1500, 3000, 2500],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>

다양한 차트 유형

Chart.js는 다양한 차트 유형을 지원합니다. 대표적인 유형으로는 막대그래프(bar), 라인그래프(line), 원형그래프(pie) 등이 있습니다. 차트 유형을 변경하고 싶다면 type 속성을 수정하면 됩니다. 예를 들어 라인그래프로 변경하고 싶다면 type: 'line'으로 설정하면 됩니다.

차트 데이터 업데이트

차트에 업데이트된 데이터를 표시하고 싶을 때는 chart.data 객체를 업데이트하고 chart.update() 메소드를 호출하면 됩니다.

chart.data.datasets[0].data = [2000, 1500, 2500, 4000, 3000];
chart.update();

차트 추가 기능

Chart.js는 다양한 추가 기능을 제공하여 차트를 보다 다채롭게 꾸밀 수 있습니다. 예를 들어 레이블, 축 설정, 툴팁, 범례 등을 커스터마이징할 수 있습니다. 더 자세한 설정은 Chart.js 공식 문서를 참고하세요.

요약

Chart.js를 사용하여 사회경제 통계 자료를 시각화하는 방법에 대해 알아보았습니다. 이 라이브러리로 막대그래프, 라인그래프, 원형그래프 등 다양한 차트 유형을 생성하고 데이터를 업데이트할 수 있습니다. 추가적인 설정을 통해 차트를 보다 멋지게 꾸밀 수 있습니다.

참고: Chart.js 공식 문서