添加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/