데이터는 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으로 넣었다.
'언어 > Chart.js' 카테고리의 다른 글
[Chart.js] 분산형 차트 4분할로 hover하고 click하기 (0) | 2024.06.27 |
---|---|
[chart.js] 분산형 그래프 포인트를 이미지로 (0) | 2024.03.16 |
[chart.js] 라인차트 데이터가 있는 곳만 표시하기 (0) | 2024.03.12 |
[chart.js] 그래프 hover시 마우스 포인터(v.4.2.1) (1) | 2024.03.06 |
[Chart.js] 그래프 클릭하면 모달 창 띄우기(v.4.2.1) (0) | 2024.01.18 |