chart.js 차트 만들기. 라인(line)차트/바(bar)차트 개발

데이터를 표현하는 방식은 가장 간편한건 숫자로 직접 보여주는 거다. 하지만 표형태로(엑셀과 같이) 카테고리별로 숫자만 보여주면, 데이터간의 비교나 추이가 한 눈에 보기 쉽지 않다. 데이터를 집계하고 가공해서 이해하기 쉬운 방식으로 표현하여 시각화하는 것이 점점 중요한 시대가 되고 있다 생각한다. 복잡한 데이터를 하나의 뷰로 한번에 표현될 수 있도록 차트의 종류나 데이터분석툴도 다양해지고 있다. 무료로 제공되는 라이브러리도 그 수준이 많이 높아지고 있고, 간단한 설정 몇개로도 굉장히 심플하고 멋진 차트를 완성 할 수 있다. 그 중 chart.js 를 가지고 개발을 해봤다.

chart.js

차트를 하나 만들고 싶었다. 수강료합계와 학원 학생수의 추이를 보기위해, 두개의 정보를 각각의 라인형식의 차트와, 바(Bar) 형식의 차트로 쌓아서 하나의 뷰로 구현해보기로 한다. 준비물은 chart.js 라이브러리 하나면 된다.

Chart.js | Open source HTML5 Charts for your website

처음 할 일은, chart.min.js 라이브러리를 추가하는 것이다. 그 밑에 있는 paymentMonths 변수는 나중에 chart 에 바인딩할 데이터를 받기위한 Thymeleaf 관련 소스이다. jsp 등 이라면, 본인 프로젝트에 맞춰서 사용하면 된다. 

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

<script th:inline="javascript">
    var paymentMonths = /*[[${paymentMonth}]]*/
</script>

 

실제 차트를 추가할 영역에 canvas 태그로 정의한다.

<div>
    <canvas id="myChart"></canvas>
</div>

 

js 영역에 chart 를 정의한다. 

document.addEventListener('DOMContentLoaded', function() {
	new Chart(document.getElementById('myChart'), v_config);
});

반응형

v_config 에 들어갈 설정정보를 셋팅한다. 크게 보면 v_data 를 먼저 셋팅하고, 그 v_data 를 품는 v_config 정보를 만들었다. 

let labels = [];
let amounts = [];
let members = [];

for(let pm of paymentMonths){
    labels.push(pm.paymentMonth);
    amounts.push(pm.sumAmount);
    members.push(pm.cntMember);
}

const v_data = {
    labels: labels,
    datasets: [
        {
            label: '수강료',
            data: amounts,
            borderColor: '#36a2eb',
            backgroundColor: '#36a2eb',
            yAxisID: 'y'
        },
        {
            label: '학생수',
            data: members,
            borderColor: '#ffb0c1',
            backgroundColor: '#ffb0c1',
            yAxisID: 'y1',
            type: 'bar'
        }
    ]
};

const v_config = {
    type: 'line',
    data: v_data,
    options: {
        interaction: {
            intersect: false,
            mode: 'index',
        },

        scales: {
            y: {
                type: 'linear',
                display: true,
                position: 'left',
                suggestedMin: 0,
                suggestedMax: 1000000,
            },
            y1: {
                type: 'linear',
                display: true,
                position: 'right',
                suggestedMin: 0,
                suggestedMax: 20,
                // grid line settings
                grid: {
                    // only want the grid lines for one axis to show up
                    drawOnChartArea: false,
                }
            }
        }
    }
};

완성했다. 여기서는 보이진 않지만, 실제로 커서를 가져다대면 학생수와 학원비합계를 볼 수 있는 정보가 실시간으로 따라다닌다. 이렇게 인터렉티브한 효과까지 있어서, 단순히 차트를 그림파일로 보여주는 보고서가 아닌 클릭해보고 특정수치는 눈으로 확인할 수 있는 차트가 된다. 차트도 역시 디자인이 생명인 것 같다. 컬러 선택이나 조합을 좀 세련되계 하고 싶은데, 디자인 공부를 따로 할 수는 없고 좋은 차트를 많이 보고 카피하려는 노력이 필요할 것 같다. 

아래 사이트에 chart.js 예시를 넣어놨다(id : user / pw : password)

메인페이지