차트 사용하기

이건 사실 공식문서가 다 있는 거라 가볍게 사용 할 수 있는 팁만 정의하려고 한다.

차트를 사용할 때에 나는 chart.js를 사용했다.

 

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

chart.js를 사용할 수 있는 소스를 추가 해주고 

아래의 형식을 사용했다.

//기본형식
new Chart(id, {
        type: 'bar',
        data: {
            labels: Xarr,
            datasets: dataset,
        },
        options: {
            responsive: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

 

1. X값을 셋팅

DB에서 데이터를 조회하여 result.xAxis값에 담은 후 삼항연산자를 이용해서 null값을 조정하고, Xarr변수에 담았다.

var Xarr = [];
var dataset = [];
for(var i = 0 ; i < result.xAxis.length; i++){
    var a = result.xAxis[i][data.xAxis] == null ? '-' :  result.xAxis[i][data.xAxis];
    Xarr.push(a);
}

2.Y값을 셋팅

Y값으로 사용될 내용을 Yarr 변수에 담았다.

 // y값 셋팅
for(var i = 0 ; i < result.column.length; i++){
    var column = result.column[i].Caption;
    var Yarr = [];
    for(var ii = 0 ; ii < result.yAxis.length; ii++){
        Yarr.push(result.yAxis[ii][column]);

    }

 

3. X값과 Y값을 json 형식으로 변수에 저장

var labelData = {
                label: column,
                data: Yarr,
                borderWidth: 1
                };

 

4. dataset변수에 json 형식을 담는다.( var dataset = [] )

dataset.push(labelData);

 

5. 그래프를 그린다

new Chart(id, {
        type: 'bar',
        data: {
            labels: Xarr,
            datasets: dataset,
        },
        options: {
            responsive: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

options 안에 repsonsive : false 의외로 굉장히 중요한 내용인데

기본적으로 그래프를 그려줄때에 default 크기는 생각보다 굉장히 커서 크기를 조절하기위해 style을 조정했는데 이상하게 크기가 변하지 않았다.구글링을 해보니 위 내용을 추가 해주면 style에 지정해 둔 크기로 변환이 된다고 하여 설정하니 그대로 되었다.

 

그래프 타입의 변화는 

type 에 'bar', 'line' , 'pie', 'doughnut' 로 형식을 지정해주면 된다.