📈 Chart.js 플러그인 소개[Plugins | Chart.js]

Chart.js 플러그인 소개[Plugins | Chart.js]

안녕하세요 TriplexLab입니다. 
오늘은 Chart.js 라고 하는 플러그인을 사용해서 데이터 시각화에 대해서 살펴보도록 하겠습니다.

👇 공식 사이트입니다. 한번 들어가셔서 설명서 보면 좋을것 같습니다.

Chart.js | Chart.js

그리고 Chart.js는 Chart에 관한 여러가지 플러그인들 종류들이 있습니다.
단순히 차트만 그리는 것이라면 위에 공식 사이트방법만 사용해도 크게 무리는 없습니다.
하지만 뭔가 커스터마이징을 해야 한다면 다음과 같은 Chart에 관한 여러가지 플러그인들 같이 사용해야 할것 입니다.
(저도 다 써보진 않았지만 웬만한 것 여기다 있는 것 같습니다.  필요하다 싶은 거 있으면 여기 와서 찾아봐야겠네요ㅎㅎ)

Chart.js

저는 이번에 chartjs-plugin-datalabels를 사용해 봤습니다.
차트에 텍스트를 넣어서 style 및 위치값등등을 변경 할수는 있네요ㅎㅎ

Chart.js 코드 설명

(function() {
	const ctx = document.getElementById('myChart').getContext('2d');
	const labels= ['Pizza 🍕', 'Taco 🌮', 'Hot Dog🌭', 'Sushi🍣']

    new Chart(ctx, {
    	type: 'pie', // bar, pie, line, doughnut, polarArea
        data: {
        	datasets: [{
            	data: [35.82,19.23,9.9,100],
                backgroundColor: ['#FB3640', '#EFCA08', '#43AA8B', '#253D5B']
            }],
            labels: labels
            },
            options: {
            responsive: true,      
            legend: {position: 'bottom'},
            plugins: {
               datalabels: {
                   color: ['#fff', '#fff', '#fff', '#fff'],
                   borderWidth: 2,
                   borderColor: ['#fff', '#fff', '#fff', '#fff'],
                   borderRadius : 25,
                   anchor: 'center',
                   	formatter: function(value, context) {
                    	return (value > 10) ? value+ "%" : null //data가 10 미만이면 숫자 값은 출력되지 않습니다.
                    }
                },
            }
        }
    });
})();

👉 결과)

Test 코드 실행한 모습.

여기까지 작업한 것을 한번 정리해 봤습니다.
궁금하신 분들은 얼마든지 다운로드하여서  Test 해 보세요~

Chart_js.zip

0.06MB