[JavaScript] Chart.js 로 파이차트 만들 때 backgroundColor 핸들링하는 방법

이번에는 Chart.js 로 데이터를 예쁘게 뿌려주는 작업을 진행하고 있다.

작업을 진행하면서 차트에 표현 할 색깔을 내 마음대로 입혔는데 ㅋㅋㅋㅋㅋㅋ 팀장님이 색이 별로라고 하셔가지고 ㅠ

클릭하면 랜덤으로 색이 바뀌도록 구현해버렸다 ㅎㅎ; (색이 마음에 안들면 클릭해서 변경하시라고 .. 🍒🍒)

하고 싶어서 여기저기 찾아보았지만,

마땅한 방안을 찾을 수 없었고 결국 내가 열심히 삽질하다 만들었다.. ^-^ 뿌듯한 마음에 바로 공유하려고 달려옴.

우선, 기본적인 Chart.js 사용법은 https://www.chartjs.org/docs/latest/charts/doughnut.html 공식홈페이지 참고하면 되고 (!)

여기서 가장 중요한 핵심 속성은 legend 와 onClick 이벤트이다.

1. 13번 라인과 같이 파이차트에 대해 legend 설정을 하고

2. 19번 라인과 같이 onClick 이벤트를 선언한 뒤

3. 24번 라인의 함수와 같이 label 에 표시된 색상(gif 상 우측 색상) 을 변경, 파이차트의 색상을 변경, 파이차트를 업데이트 시켜주면 된다.

var ctx = document.getElementById("pieChartTest").getContext("2d");
    window.pieChart = new Chart(ctx, {
        type : 'pie',
        data : data, //저는 따로 위에서 변수로 선언하여 이용하였습니다.
        options : {
            title : {
                display : true,
                fontSize : '16',
                fontColor : '#FFFFFF',
                text : '브라우저 빈도'
            },
            responsive : true, //여기까지는 chartJS 홈페이지 문서 보면서 만드시면 됩니다 :)
            legend : {
                display : true,
                labels : {
                    fontColor : 'rgba(255,255,255,0.7)'
                },
                position : 'right',
                onClick : MyStatistics.changeChartColor //여기가 핵심!!!
            }
        }
    });
},
changeChartColor : function(e, item) {
    item.fillStyle = MyStatistics.dynamicColors(); // 라벨 색상
    this.chart.config.data.datasets[0].backgroundColor[item.index] = item.fillStyle; // 차트 색상
    this.chart.update(); // 변경된 차트 업데이트
},

아, 맞다 랜덤색상은 아래 처럼 함수 만들어서 사용하면 된다. 끝!

dynamicColors : function() {
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    return "rgba(" + r + "," + g + "," + b + ",0.8)";
}