将 mouseout 事件处理程序添加到 Chart.js 中的图例

Question

在图例的onHover事件中，我想将鼠标光标的样式更改为指针（是的，这可以按照下面的代码来完成）。但是如果鼠标超出图例，我想将鼠标光标更改回默认值。 Chart.js 有可能吗？谢谢。

注意：在Chart.js documentation中提供了onHover回调，但是没有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");          
        }
   },
  }
});

这里是 link 到 the example in jsfiddle.

Answer 1

添加这个

hover: {
    onHover: function(e) {
    $("#canvas1").css("cursor", "auto");
  }

到options:

像这样：

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/

将 mouseout 事件处理程序添加到 Chart.js 中的图例

Add mouseout event handler to legends in Chart.js

javascript

charts

chart.js

chart.js2