[英]Add mouseout event handler to legends in Chart.js
在onHover of legends的情況下,我想將鼠標光標的樣式更改為指針(是的,這可以按照下面顯示的代碼完成)。 但是如果鼠標沒有傳說,我想將鼠標光標改回默認值。 Chart.js有可能嗎? 謝謝。
注意:在Chart.js文檔中,它提供onHover回調,但沒有mouseout。
HTML:
<canvas id="canvas1" height="150"></canvas>
JavaScript的:
var ctx = document.getElementById("canvas1").getContext("2d");
var mychart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['uno', 'dos', 'tres', 'cuatro'],
datasets: [{
data: [1, 2, 3, 4],
backgroundColor: ["#BDC3C7","#9B59B6","#E74C3C","#26B99A"]
}]
},
options: {
legend: {
position: 'bottom',
onHover: function(c) {
console.log(c);
$("#canvas1").css("cursor", "pointer");
}
},
}
});
這是jsfiddle中示例的鏈接。
加上這個
hover: {
onHover: function(e) {
$("#canvas1").css("cursor", "auto");
}
options:
像這樣:
var ctx = document.getElementById("canvas1").getContext("2d");
var mychart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['uno', 'dos', 'tres', 'cuatro'],
datasets: [{
data: [1, 2, 3, 4],
backgroundColor: ["#BDC3C7","#9B59B6","#E74C3C","#26B99A"]
}]
},
options: {
hover: {
onHover: function(e) {
$("#canvas1").css("cursor", "auto");
}
},
legend: {
position: 'bottom',
onHover: function(c) {
console.log(c);
$("#canvas1").css("cursor", "pointer");
}
}
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.