(*vue.js) chart.js에 datalabels 플러그인입히기

기존 Pie Chart나 doughnut chart에 데이타 레이블을 입혀보자.

1. npm isntall chartjs-plugin-datalabels

2. 그냥 적용하면 모든 차트에서 전부 데이타 레이블이 다닥다닥 붙는다.

한 가지의 차트에만 적용하고 싶다면 글로벌 환경에서 unregister를 꼭 해줄것

 

Chart.plugins.unregister(ChartDataLabels);
data: function() {
	return {
    	Options: {
        	responsive: true,
            maintainAspectRatio: false,
            legend: {
            
            }
            //option config 안에 plugins라는 항목을 추가한다.
            plugins: {
                    datalabels: {
                        backgroundColor: function (context) {
                            return context.dataset.backgroundColor;
                        },
                        borderColor: 'white',
                        borderRadius: 30,
                        borderWidth: 2,
                        color: function (context) {
                            return context.hovered ? 'black' : '#6e6d6d'
                        },
                        font: {
                            weight: 'normal'
                        },
                        listeners: {
                            enter: function (context) {
                                context.hovered = true;
                                return true;
                            },
                            leave: function (context) {
                                context.hovered = false;
                                return true;
                            }
                        },
                        display: true,
                        formatter: function (value, context) {
                            let sum = 0;
                            let valueArr = this.doughnutChart.datasets[0].data;
                            for (var i in valueArr) {
                                sum += parseInt(valueArr[i]);
                            }
                            let percentage = (value * 100 / sum).toFixed(2) + "%";
                            return percentage;
                        }.bind(this)
                    },
                },
        }
    }
}

 

완성 후 그래프 모양

데이타의 실체수치를 퍼센트로 계산하여 동그라미 라벨에 표시하였다. 차트가 더욱 보기 좋아졌다. 

 

참조링크:

https://chartjs-plugin-datalabels.netlify.com/samples/index.html