chart.js를 이용해 데이터 시각화하기

Chart.js 는 HTML5 캔버스 요소를 사용하여 반응형 차트를 만들 수 있는 오픈 소스 자바스크립트 라이브러리이다.
다양한 차트 유형을 제공하며, 사용자 정의가 가능해 원하는 모양의 차트를 만들 수 있다.

 

[ 주요 기능 ]

• 다양한 차트 유형 지원: 막대 차트, 꺾은선 차트, 원 차트, 산점도 등
• 실시간 데이터 업데이트
• 사용자 정의 가능한 스타일링
• 반응형 디자인
• 애니메이션 효과
• 범례, 툴팁, 축 레이블 등 다양한 기능 제공

[ 예제 ]

// 차트를 그릴 영역으로 canvas태그를 사용한다.
<canvas id="myChart" width="400" height="400"></canvas>

// 해당 부분은 JS파일을 따로 만들어서 사용해도 된다.
<script>
// 차트를 그럴 영역을 dom요소로 가져온다.
var chartArea = document.getElementById('myChart').getContext('2d');
// 차트를 생성한다. 
var myChart = new Chart(chartArea, {
    // ①차트의 종류(String)
    type: 'bar',
    // ②차트의 데이터(Object)
    data: {
        // ③x축에 들어갈 이름들(Array)
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        // ④실제 차트에 표시할 데이터들(Array), dataset객체들을 담고 있다.
        datasets: [{
            // ⑤dataset의 이름(String)
            label: '# of Votes',
            // ⑥dataset값(Array)
            data: [12, 19, 3, 5, 2, 3],
            // ⑦dataset의 배경색(rgba값을 String으로 표현)
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            // ⑧dataset의 선 색(rgba값을 String으로 표현)
            borderColor: 'rgba(255, 99, 132, 1)',
            // ⑨dataset의 선 두께(Number)
            borderWidth: 1
        }]
    },
    // ⑩차트의 설정(Object)
    options: {
        // ⑪축에 관한 설정(Object)
        scales: {
            // ⑫y축에 대한 설정(Object)
            y: {
                // ⑬시작을 0부터 하게끔 설정(최소값이 0보다 크더라도)(boolean)
                beginAtZero: true
            }
        }
    }
});
</script>

 

Chart.js 는 데이터 시각화를 위한 강력한 도구입니다. 다양한 차트 유형과 사용자 정의 기능을 제공하여 원하는 모양의 차트를 쉽게 만들 수 있다. 또한 반응형 디자인과 애니메이션 효과로 시각적으로 아름답고 인터랙티브한 차트를 구현할 수 있다. 차트.js를 활용하면 데이터를 효과적으로 표현하고 사용자에게 전달할 수 있다.