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 값만 뺄 수 있게끔 되어야 할꺼같네요.
방법 좀 부탁드리겠습니다.
감사합니다.
</p>
<p><script src="<a href="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script></a>
<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],</p>
<p> 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
},</p>
<p> //그래프의 항목 옵션
legend: {
display: true,
position: 'bottom',
},</p>
<p>
/*
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
*/
}
});
</script></p>
<p>
답변 1개
옵션을 아래처럼 tooltips 옵션값 적용하심 값은 빠지고 출력됩니다.
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
return label;
}
}
}
아래 적용예
</p>
<p>options: {
//그래프의 제목 옵션
title: {
display: true,
text: 'INTERNATIONAL STUDENTS',
fontSize: 20
},
//그래프의 항목 옵션
legend: {
display: true,
position: 'bottom',
},
<span style="background-color:#f1c40f;"> tooltips: {</span>
<span style="background-color:#f1c40f;"> callbacks: {</span>
<span style="background-color:#f1c40f;"> label: function(tooltipItem, data) {</span>
<span style="background-color:#f1c40f;"> var label = data.labels[tooltipItem.index];</span>
<span style="background-color:#f1c40f;"> return label;</span>
<span style="background-color:#f1c40f;"> }</span>
<span style="background-color:#f1c40f;"> }</span>
<span style="background-color:#f1c40f;"> }</span></p>
<p> /*
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
*/
}</p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인