Chart.js로 간단하게 그래프 그리기

아래 이미지와 같은 그래프를 그리려면 어떠한 방법이 있을까요?

HTML canvas에 그래프를 그리도록 직접구현도 가능하지만 투자대비 퀄리티가 만족스럽지 못할 확률이 높습니다.

따라서 Chart.js라는 오픈소스 라이브러리를 이용해서 쉽게 그래프를 그려보려고 합니다.

 

1. 가장 먼저 HTML 영역에 그래프를 그리고 싶은 영역에 아래와 같이 canvas를 추가해줍니다.

<canvas id="barchartArea"></canvas>

 

2. x, y좌표에 들어갈 라벨 및 데이터를 입력해줍니다.

 

labels는 x축에 들어갈 값,

datasets에는 실제 그래프로 그려질 데이터와 관련된 부분이며

중요한 부분은 datasets 내부에 data가 실제 y축에 들어갈 값 입니다.

const data = {
    labels: ['202201', '202202', '202203'], //x축 데이터 값
    datasets: [{
        label: '매출규모 (만원)', //y축 데이터에 대한 표기
        data: [396, 333, 423], //y축 데이터 값
        barThickness: 30, //바의 픽셀 넓이
        backgroundColor: 'rgba(49, 108, 255, .6)' //바의 색상
    }]
};

 

3. 그래프를 선택하고 관련된 값들을 설정합니다.

그래프 종류를 선택한 다음에 생성된 데이터를 넣어줍니다.

const config = {
    type: 'bar', //그래프 종류, 막대그래프 선택
    data: data, //데이터
    options: {
        layout: {
            padding: 20 //모든 면에 패딩 20px 적용
        },
        scales: {
            y: {
                beginAtZero: true, //y축 시작값을 0으로 시작할지 여부
            },
        },
        plugins: {
            legend: { //데이터와 관련된 안내
                position:'bottom', //하단에 표시 (ex. 매출규모 (만원))
            },
        },
    }
 };

scales 내에 beginAtZero에 대해서 조금 더 살펴보겠습니다.

true로 해주면 맨 처음 그래프처럼 시작값이 0으로 설정되고

false로 하게되면 그래프를 더 명확하게 표현할 수 있는 최저 값으로 자동 설정됩니다.

아래 이미지를 보시면 차이를 확인하실 수 있습니다.

beginAtZero가 true인 경우(좌), false 경우(우)

 

4. 마지막으로 아래와 같이 생성완료해주시면 됩니다.

let chart = new Chart($("#barchartArea"), config)