Chart.jsの凡例にmouseoutイベントハンドラを追加

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/