언어/Chart.js
[chart.js] 그래프 hover시 마우스 포인터(v.4.2.1)
홍시_코딩기록
2024. 3. 6. 22:05
options: {
onHover: (event, chartElement) => {
event.native.target.style.cursor = chartElement.length === 1 ? 'pointer' : 'default';
// console.log(event);
// console.log(chartElement);
// if(chartElement.length === 1) {
// event.native.target.style.cursor = 'pointer';
// } else {
// event.native.target.style.cursor = 'default';
// }
},
scales: {
y: {
beginAtZero: true
}
}
}
- 그래프가 있으면 chartElement.length가 1로 나오기 때문에 1인 경우에만 cursor를 pointer로 설정했다.
- 처음에 if문으로 했지만 삼항연산자로 간단하게 수정하였다.
- cursor를 찾기 위해선 event부터 하나씩 타고 들어가면 됨..
***
interaction{
intersect: false로 되어있으면 제대로 안됨!
}
false로 되어있으면 가까이만 가도 툴팁이 뜨게하는 거기때문에 true로 해서 정확히 그래프 위로 올라갔을 때만 나오게 해야함.
https://www.youtube.com/watch?v=Uj_I2_7o0No