ChartJs 예제 01 - 바 차트 구현

데이터 시각화에 있어서 가장 보편적으로 사용하는 게 차트가 아닐까 싶다.

 

보통 javascript에서는 대표적으로 chartjs, flot.js, d3.js.. 이 있는 거 같다.

 

예전 실무에서 ChartJs에 플러그인까지 커스터마이징해서 원하는 차트를 구현한 적이 있지만 2년 사이 기억이 안 나더라

 

그래서 정리를 좀 하고 기억을 더듬어 보고자 Chartjs를 정리해보고자 한다.

 

뭐 차트 종류야 여러 가지가 있지만 바, 파이, 라인 차트만 구현하는 예제를 진행할 것이다.

 

ChartJs로 차트 구현을 하면서 버전 문제를 빼놓을 순 없을 것 같다. 안 그래도 api 문서를 여러 번 꼼꼼히 봐야 하는데

 

이놈은 버전이 올라가니깐 options key 값도 바뀌고 암튼 헷갈리는 게 많았다.

 

여기서는 2.9.4 버전을 사용했다.

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

설치를 끝냈다.

 

그럼 간단히 돼지고기, 소고기, 닭고기, 양고기 판매량에 대한 차트를 구현해보자

 

데이터셋을 정의해보면 아래와 같다.

var dataset = {
        label :"육류 판매량",
        barThickness: 15,
        data:[50,45,75,40]
}

var labels=['돼지고기','소고기','닭고기','양고기'];

var datasets={
        datasets:[dataset],
        labels:labels
}

 

기본적이 configuration은 아래 소스와 같다.

var config = {
    type: 'bar',//차트 타입 'bar','pie','polarArea'...
    data: [datasets],//데이터 셋
    options: {
        legend: {//범례 설정
            labels: {
                fontColor: 'rgb(255, 255, 255)'
            }
        },
        responsive: true,
        scales: {//x,y축 설정
            yAxes: [{
                ticks: {
                    stepSize: 10, //y축 간격
                    suggestedMin: 0,//y축 최소 값
                    suggestedMax: 100,//y축 최대값
                },
                gridLines: {//y축 라인 스타일 설정
                    borderDash: [2, 2],
                    borderDashOffset: 0.2
                }
            }],
            xAxes: [{//x축 설정
                ticks: {
                    
                }
            }]
        }
    }

}

자세한 옵션에 대한 속성은 아래 링크를 참조하면 된다.

https://www.chartjs.org/docs/2.9.4/

Introduction · Chart.js documentation

소스를 실행시켜보면 아래와 같이 잘 나온다.

다음 포스팅에서는 파이 차트에 대해 살펴보겠다.