chart.js 파이차트로 재질문입니다
본문
파이차트, 도넛차트 바깥에 숫자를 써넣으려고 하는데..
anchor: 'end',
align: 'top',
이렇게 하면 바깥에 있긴 한데 가운데가 아니고
align: 'center로 설정하면 가운데는 맞는데 테두리에 걸쳐있네욤...
방법이 있을까요..?
추가로 차트가 회전되었으면 하는데.. 숫자는 회전이 안되서 아시는분 있으면 질문 드립니다 ㅠ
var options2 = {
plugins: {
datalabels: {
display: function (context) {
return context.dataset.data[context.dataIndex] > 0;
},
anchor: 'end',
align: 'top',
color: '#707070',
font: {
family: 'Pretendard',
weight: '500',
size: 14
},
formatter: function (value, context) {
if (context.dataIndex === 0) {
return addCommas(value + "%");
} else {
return '';
}
},
},
},
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
top: 10,
right: 10,
left: 10,
bottom: 10
},
},
};
var data4 = {
datasets: [{
data: [20, 80],
backgroundColor: ['#7badf2', '#dcdcdc'],
borderWidth: 0,
}]
};
var ctx4 = document.getElementById('circleChart1').getContext('2d');
var myChart4 = new Chart(ctx4, {
type: 'pie',
data: data4,
options: options2,
plugins: [ChartDataLabels],
});
답변 1
안녕하세요.
이 코드가 도움이 될지요~
var options2 = {
plugins: {
datalabels: {
display: function (context) {
return context.dataset.data[context.dataIndex] > 0;
},
anchor: 'end',
align: 'top',
offset: 10, // 라벨 위치 조절
rotation: 270, // 라벨 회전
color: '#707070',
font: {
family: 'Pretendard',
weight: '500',
size: 14
},
formatter: function (value, context) {
if (context.dataIndex === 0) {
return addCommas(value + "%");
} else {
return '';
}
},
},
},
// 이하 생략...
}