[Chart.js] stacked bar chart 만드는 법 ( customizing )

 

 

1. 완성 이미지

---

 

나의 경우에는 내가 진행하고 있는 개인 프로젝트에서 아무것도 없이 그래프만 나타나는 버전을 원했기에 chart.js 를 활용하여 customize 를 했다. 많이 참고자료가 없어서 오랜시간동안 API 와 구글링을 하였다.

 

 

 

 

 

2. 코드 설명

---

1) DATASET

//chart.js 옵션 setting
        var data = {
            labels : ['a'],
            datasets : [
                {
                    label : 'a',
                    data : [42],
                    backgroundColor : '#4169e1'
                },
                {
                    label : 'b',
                    data : [83],
                    backgroundColor : '#87ceeb'
                },
                {
                    label : 'c',
                    data : [31],
                    backgroundColor : '#b0e0e6'
                },
            ]
        }

위 코드가 옳다는 것은 아니지만 dataset 에 들어가는 labels 는 한개

datasets 는 3파트로 나누고 각각 한개씩 분배를 해주었다.

다른 방법들을 많이 구글링하여 시도해보았지만, 

위와 같이 코드를 작성했을 때 원하는 모양대로 데이터가 나왔다.

 

 

 

 

 

2) OPTIONS

var options = {
                responsive: false,
                scales: {
                    x : {
                        stacked : true, // 누적 막대 그래프 표시
                        display : false, // 그리드 선 제거
                    },
                    y : {
                        stacked : true,
                        display : false,
                    },   
                },
                indexAxis : 'y', // 인덱스 축 설정(y 축으로 변경)
                plugins : {
                    legend : {
                        display : false // 범례 제거
                    }
                }
            };

stacked 를 만들기 위해서는 scales 에 stacked 를 넣어야 한다

추가적으로 그래프 그리드 선 제거를 위해서는 display 를 false 로 해주었다.

나의 경우에는 혹시나해서 y 축에도 넣어놓았는데 추후 비슷한 그래프를 만들때는 조절해야겠다.

그리고 가로로 할 경우에는 index 를 반대로 해야할 수도 있기 때문에 상황에 맞추어 indexAxis 를 넣어준다

 

그리고 범례를 제거하기 위해서는 legend 를 제거했다. 

 

 

 

 

3. 최종 표시

---

그리고 위에서 작성했던 옵션, 데이터를 마지막에 넣는다 

//chart.js 그래프 띄우기
            var ctx = document.getElementById("myChart");
            var myChart = new Chart(ctx, {
                type : 'bar',
                data : data,
                options : options
            });

 

 

그리고 난 후 최종적으로 html 파일에서 <canvas></canvas> 섹션을 만들어준다

<div class="sc"> stic chart
        <canvas id="myChart" width="500" height="400"></canvas>
</div>

 

 

 

 

 

 

4. 참고 링크

---

https://stackoverflow.com/questions/38593123/how-to-hide-y-axis-line-in-chartjs

How to hide y axis line in ChartJs?

https://okky.kr/article/1000785

OKKY | chart.js 범례 제거

https://www.chartjs.org/docs/latest/developers/api.html

API | Chart.js