chart.js 차트 툴팁 질문 있습니다.
본문
안녕하세요.
chart.js 차트를 사용해서 그래프를 하나 그려주려고 하는데 뒤에 % 를 써 주려고 값에 넣어줬습니다.
차트에 롤오버하면 labels: ['JAPAN - 30.8%', 'KOREA', 'TAIWAN', 'VIETNAM', 'CHINA', 'ARAB', 'ETC'] 레벨 안에 값만 표시되게 하면 될꺼같아서요.
데이터안에 들어있는 값 data:[30.8, 19.1, 30.6, 4.7, 10, 19.1, 1.5]값은 롤오버해도 안나오게 할 수 있을까요?
툴팁을 사용해서 해야 할꺼같은데 해봐도 잘 되질 않네요.
아래처럼 마우스 롤오버 하면 JAPAN - 30.8% 나오는데 거기에 배열의 값 30.8 이 또 나오네요.
labels 에서 %로 넣은 값을 빼면 된다고 하시는데 하단에 labels 에 있는 그대로 항목으로 나오게 하기 위해서라도 이렇게 들어가야 할꺼같아 빼는게 안되고 data 값만 뺄 수 있게끔 되어야 할꺼같네요.
방법 좀 부탁드리겠습니다.
감사합니다.
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart" width="1" height="1"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['JAPAN - 30.8%', 'KOREA', 'TAIWAN', 'VIETNAM', 'CHINA', 'ARAB', 'ETC'],
datasets: [{
label: 'INTERNATIONAL STUDENTS',
data:[30.8, 19.1, 30.6, 4.7, 10, 19.1, 1.5],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(233, 233, 233, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(233, 233, 233, 1)'
],
borderWidth: 1
}]
},
options: {
//그래프의 제목 옵션
title: {
display: true,
text: 'INTERNATIONAL STUDENTS',
fontSize: 20
},
//그래프의 항목 옵션
legend: {
display: true,
position: 'bottom',
},
/*
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
*/
}
});
</script>
답변 1
옵션을 아래처럼 tooltips 옵션값 적용하심 값은 빠지고 출력됩니다.
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
return label;
}
}
}
아래 적용예
options: {
//그래프의 제목 옵션
title: {
display: true,
text: 'INTERNATIONAL STUDENTS',
fontSize: 20
},
//그래프의 항목 옵션
legend: {
display: true,
position: 'bottom',
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
return label;
}
}
}
/*
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
*/
}
와 정말 감사합니다. 제가 한거랑 비슷해 보이는데 역시 제가 실력이 없는거네요..ㅠㅠ
