如何在chart.js圆环图上更改鼠标光标？

Question

当使用Chart.js库时,我想在将鼠标悬停在甜甜圈上时更改光标.

我这样做:

$("#dc_LoadTime").mouseleave(function(){
    $("#dc_LoadTime").css("cursor", "default");
}); 
$("#dc_LoadTime").mouseenter(function(){
    $("#dc_LoadTime").css("cursor", "pointer");
});

在html页面中有这个

<canvas id="dc_LoadTime"></canvas>

但是当鼠标进入或离开帆布而不是在圆环图上时,这个更改光标.我找不到办法做到这一点.有人知道这是否可行？

Answer 1

在chartjs 2.0 <2.5中,我使用悬停在图表的选项部分,如下所示:

options: {
  hover: {
    onHover: function(e) {
      $("#id-of-your-canvas").css("cursor", e[0] ? "pointer" : "default");
    }
  }
}

......这是一个完整的例子:https://jsfiddle.net/su5fgb5h/5/

在版本2.5 onhover回调已更改,我们需要第二个参数来更改光标:

options: {
  hover: {
    onHover: function(e, el) {
      $("#id-of-your-canvas").css("cursor", el[0] ? "pointer" : "default");
    }
  }
}

Answer 2

您可以利用 showTooltip 方法，如下所示

...
var myDoughnutChart = new Chart(ctx).Doughnut(data);

var originalShowTooltip = myDoughnutChart.showTooltip;
myDoughnutChart.showTooltip = function (activeElements) {
    $("#dc_LoadTime").css("cursor", activeElements.length ? "pointer" : "default");
    originalShowTooltip.apply(this, arguments);
}