반응형
차트 js를 사용하다보면 차트 내에서 해당 값이 어떤지 표시할 필요가 있다.
시안성 측면에서 매우 유리하니까.
그런데, 이게 기능구현이 매우 어려웠다.
왜 안되나 했더니 이게 확장 라이브러리로 지원하는 기능이었네?
사용방법은 3번째 링크를 참조하자.
대충 공식문서를 보면 plugins 코드 안에 설정하고, data 객체에도 따로 넣어주면 된다.
하지만 3번째 링크보면 더 자세히 설명되어 있다.
Chart.defaults.set('plugins.datalabels', {
color: '#FE777B'
});
var chart = new Chart(ctx, {
options: {
plugins: {
// Change options for ALL labels of THIS CHART
datalabels: {
color: '#36A2EB'
}
}
},
data: {
datasets: [{
// Change options only for labels of THIS DATASET
datalabels: {
color: '#FFCE56'
}
}]
}
});
첫번째 링크는 너무 옛날 코드라 라이브러리가 분리되기전 코드였다.
그렇기에 현재는 안되는 사장된 코드.
https://risha-lee.tistory.com/11
최신형 3.x가 지원되는 라이브러리
https://chartjs-plugin-datalabels.netlify.app/
https://jsp-making.tistory.com/459
var chart = new Chart(ctx, {
...,
plugins:[ChartDataLabels], // 이거 그대로 복사해서 붙여 넣으세요.. ^^;
data:{
datasets: [{
data: ...,
datalabels:{
color:'black', // 너무 흐리다 싶어서 잘 보이도록 완전히 검게..
// 배경색을 어떻게 세팅했냐에 따라 적절히..
font:{size:24} // pixel 단위이고, 수치로 입력
}
}],
labels:[ ... 여기에 화면에 표시되는 라벨을 세팅 .. ] // formatter 의 context.chart.data.labels[idx]
},
...,
options:{
plugins:{
datalabels:{
formatter:function(value,context){
// data 에 넣은 데이타 순번. 물론 0 부터 시작
var idx = context.dataIndex;
// 여기선 첫번째 데이타엔 단위를 '원' 으로, 그 다음 데이타엔 'P' 를 사용
// addComma() 는 여기서 기술하지 않았지만, 천단위 세팅. ChartJS 의 data 엔 숫자만 입력
return context.chart.data.labels[idx]+ ' ' +addComma(value)+ (idx==0 ? '원' : 'P');
}
}
}
}
};
그런데, 도넛 그래프의 경우..
값이 0 이거나, 다른 항목에 비해 상대적으로 극미한 값인 경우..
canvas 경계선에서 해당 라벨이 잘려지는 상황이 발생하는데,
이 때에는.. 아래와 같이 해 줍니다. (다른 옵션으로도 가능하긴 하겠지만..)
...
options:{
plugins:{
datalabels:{
align:'top',
}
}
}
...
728x90
'취업 > Chart.js' 카테고리의 다른 글
[Chart.JS]Line Chart Boundaries 라벨붙이기2 (0) | 2022.10.25 |
---|---|
[Chart.JS]Line Chart Boundaries 라벨붙이기 (0) | 2022.10.25 |
[chart.js] Radar 차트 마지막 외곽선만 두껍게 하기 (0) | 2022.10.17 |
[php] chart.js radar chart(방사형 차트, 원형차트) 마지막 테두리 두껍게 하기 (0) | 2021.11.08 |
[php] chart.js 레이다 차트(radar chart) 작성하기 (0) | 2021.11.08 |