添加mouseout事件處理函數到Chart.js中的圖例

Question

在傳說的onHover事件中，我想將鼠標光標的樣式更改爲指針（是的，這可以如下所示的代碼完成）。但是如果鼠標不在圖例中，我想將鼠標指針改回默認值。 Chart.js中可能嗎？謝謝。

注意：在Chart.js documentation它提供onHover回調，但沒有鼠標。

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");   
     } 
    }, 
    } 
}); 

這裏是鏈接到the example in jsfiddle。

Answer 1

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");     
       } 
    } 
    } 
}); 

https://jsfiddle.net/v77twcww/