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＆lt; 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);
}

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

2 个答案: