Chart.js로 시작하는 데이터 시각화 시작하기

2024. 2. 15. 01:37ㆍ개발/chart.js

반응형

데이터 시각화는 정보를 이해하기 쉽고 효과적으로 전달하는 핵심 도구입니다.

이를 위해 많은 라이브러리와 도구가 개발되었는데, (Chart.js, D3.js, Highcharts, Google Charts, Plotly ...)

그 중에서도 Chart.js는 사용하기 쉽고 다양한 종류의 차트를 만들 수 있는 하나의 도구입니다.

 

이번 포스트에서는 Chart.js를 소개하고, 간단한 예제를 통해 시작해보겠습니다.

 

Chart.js란?

홈페이지나 다른 chart.js의 설명이 잘 되어있는 글들이 있지만 다시 정리하면

Chart.js는 HTML5 Canvas를 사용하여 동적인 차트를 생성하는 JavaScript 라이브러리입니다. 간단한 사용법과 다양한 차트 종류를 제공하여, 데이터 시각화를 위한 이상적인 선택지입니다.

 

시작하기

Chart.js를 사용하여 간단한 선 그래프를 만들어보겠습니다. 먼저 HTML 파일을 생성하고, Chart.js 라이브러리를 연결합니다.

 

여러분이 프로젝트에 처음 접근하는 경우, Chart.js를 쉽게 활용할 수 있는 방법 중 하나는 CDN을 통해 라이브러리를 가져오는 것입니다. 이렇게 하면 로컬 환경에서 라이브러리를 설치하거나 관리할 필요가 없으며, 간편하게 시작할 수 있습니다.

 

간단한 예제를 통해 시작해보겠습니다. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Chart.js 소개</title>
    <!-- chart.js 를 cdn을 통해 가져온다 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <!-- 크기는 400 x 400 -->
    <!-- div를 생성해 chart의 크기가 400x400을 넘어가지 않도록 해줘요 -->
    <div style="width: 400px; height: 400px;">
        <!-- chart가 그려질 canvas를 생성 -->
        <canvas id="myChart" width="400" height="400"></canvas>
    </div>
    
    <script>
        // 차트 생성
        const canvas = document.getElementById('myChart'); // canvas를 ID로 가져오기
        console.log(canvas);
        const ctx = canvas.getContext('2d'); // canvas 요소의 2차원 그래픽 컨텍스트를 가져오는 메서드

        // 캔버스에 선 그래프를 그리기 위해 Chart 객체를 생성합니다.
        const myChart = new Chart(ctx, {
            // 차트 유형 설정: 선 그래프
            type: 'line',
            // 데이터 설정
            data: {
                // x 축 레이블
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                // 데이터셋 설정
                datasets: [{
                    // 데이터셋 제목
                    label: '# of Votes',
                    // 데이터 포인트 배열
                    data: [12, 19, 3, 5, 2, 3],
                    // 데이터 색상
                    // 데이터 색상
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    // 선 색상
                    borderColor: 'rgba(255, 99, 132, 1)',
                    // 선 두께
                    borderWidth: 1
                }]
            },
            // 차트 옵션 설정
            options: {
                // y 축 시작 값 0으로 설정
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
</body>
</html>

 

위 코드는 'myChart'라는 ID를 가진 캔버스에 선 그래프를 그리는 간단한 예제입니다

 

예제 결과 이미지

간단한 chart.js 를 그려보면서 소개를 했습니다.

다음번에는 제가 실무에서 고생하면서 알게 된 여러 가지 내용들을 공유하면서 이만 물러가겠습니다.

 

 

반응형
저작자표시 비영리 변경금지

'개발 > chart.js' 카테고리의 다른 글

chart.js 버튼 이벤트 예제  (0) 2025.01.20
Chart.js에서 Zoom 플러그인을 활용한 효과적인 데이터 시각화  (0) 2025.01.14
Chart.js에서 Min/Max를 활용한 Zoom In/Out 기능 구현하기  (0) 2024.02.25
Chart.js로 다양한 데이터를 동적으로 제어하기  (0) 2024.02.18

관련글

티스토리툴바