MouseOut-Event-Handler zu den Legenden in Chart.js hinzufügen

Question

Im Falle von onHover von Legenden, möchte ich den Stil des Mauszeigers zum Zeiger ändern (ja, das kann wie der unten gezeigte Code getan werden). Aber im Falle einer Maus außerhalb der Legenden möchte ich den Mauszeiger wieder auf den Standard zurücksetzen. Ist es in Chart.js möglich? Vielen Dank.

Hinweis: In der Chart.js documentation bietet OnHover Rückruf, aber kein 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");   
     } 
    }, 
    } 
}); 

Hier ist der Link zu 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/