언어/Chart.js
[Chart.js] 데이터 값마다 포인트 이미지 다르게 주고 싶다.
홍시_코딩기록
2024. 6. 27. 23:14
데이터는 0 ~ 100으로 들어가지만 위아래 여백을 주고 싶어서 +- 10씩 해줬다.
<div class="chart">
<canvas id="myChart"></canvas>
</div>
const ctx = document.getElementById('myChart');
const dataValues = [75, 25, 50, 0, 100];
// 이미지 아이콘
const imageUrls = [
'./emoji_0.png',
'./emoji_25.png',
'./emoji_50.png',
'./emoji_75.png',
'./emoji_100.png',
]
const images = imageUrls.map(url => {
const img = new Image(25, 25);
img.src = url;
return img;
});
new Chart(ctx, {
type: 'line',
data: {
labels: ['일', '이', '삼', '사', '오'],
datasets: [{
label: '# of Votes',
data: dataValues,
borderWidth: 2,
borderColor: 'salmon',
lineTension: 0.4,
pointStyle: function(context) {
const value = context.dataset.data[context.dataIndex];
let index;
if (value === 0) {
index = 0;
} else if (value === 25) {
index = 1;
} else if (value === 50) {
index = 2;
} else if (value === 75) {
index = 3;
} else {
index = 4;
}
return images[index];
}
}]
},
options: {
layout: {
padding: {
left: 20,
right: 40,
top: 20,
bottom: 20
}
},
scales: {
x: {
display:false,
offset: true,
},
y: {
min: -10,
max: 110,
ticks: {
stepSize: 60,
},
}
}
}
});
이미지 주소를 imageUrls 배열에 넣고 값에 따라 이미지를 넣어줬다.
데이터 0이면 = image[0]
25이면 = image[1] ..... 난 데이터를 5개로만 넣을거라 이렇게 했지만
영역으로 한다면 0 ~ 24 이렇게 바꾸면 될듯하다.
상하좌우 여백 주기 위해서 min max값을 조정.
좌우 여백은 x offset으로 넣었다.