能否在Chart.js中使用mouseenter和mouseleave事件？

Question

目前我在每个饼图中使用onHover添加一些缩放/放大效果，但我想使用mouseenter和mouseleave。因此，在每个饼图上的mouseenter时，它将添加一些缩放/放大效果，在mouseleave时，我希望它恢复到原始状态。

可以使用mouseenter-mouseleave或mouseover-mouseout，都可以。

这是Codepen链接: https://codepen.io/graydirt/pen/NWNZNyQ

谢谢大家！

var ctx = document.getElementById('chartPie').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Red', 'Blue', 'Green'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 20],
            backgroundColor: [
                'red',
                'blue',
                'green'
            ],
          datalabels: {
            color: '#000'
          }
        }]
    },
    options: {
        legend: {
          display: false            
        },
      layout: {
        padding: 5
      },
        onHover: function (evt, elements) {
          let segment;
          if (elements && elements.length) {
            segment = elements[0];
            this.chart.update();
            selectedIndex = segment["_index"];
            segment._model.outerRadius += 5;
          } else {
            if (segment) {
              segment._model.outerRadius -= 5;
            }
            segment = null;
          }
      }
    }
});

    .chart-pie {
      width: 400px;
      height: 400px;
      margin: auto;
    } 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
<div class="container p-4">
      <div class="chart-pie position-relative">
      <canvas id="chartPie"></canvas>
    </div> 
</div>

- clarkf

Answer 1

您的代码已经设计好在鼠标移出时返回到原始大小，但是存在一个微妙的错误。

您需要在图表外部定义 `segment` 变量。通过保存对该段的引用，`mouseout` 事件将会触发并且 `onHover` 处理程序将把饼图恢复到其原始大小。

请参见下面附带的示例：

let segment;
var ctx = document.getElementById('chartPie').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['Red', 'Blue', 'Green'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 20],
      backgroundColor: [
        'red',
        'blue',
        'green'
      ],
      datalabels: {
        color: '#000'
      }
    }]
  },
  options: {
    legend: {
      display: false
    },
    layout: {
      padding: 5
    },
    onHover: function(evt, elements) {
      if (elements && elements.length) {
        segment = elements[0];
        this.chart.update();
        selectedIndex = segment["_index"];
        segment._model.outerRadius += 5;
      } else {
        if (segment) {
          segment._model.outerRadius -= 5;
        }
        segment = null;
      }
    }
  }
});

.chart-pie {
  width: 400px;
  height: 400px;
  margin: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
<div class="container p-4">
  <div class="chart-pie position-relative">
    <canvas id="chartPie"></canvas>
  </div>
</div>

- ty.

---

有没有办法在鼠标悬停在每个饼图上时制作一个盒子阴影，并在鼠标离开时将其删除？ - clarkf

是的，但那是个不同的问题！ 很乐意在另一篇文章中提供帮助。如果我的回答有所帮助，请接受它 :) - ty.

嗨ty，这是关于它的单独问题。谢谢。 - clarkf

@ty。我尝试在最新的Chart.js版本中重用您的示例，但没有成功。您能给我一点帮助吗？ - marcelo2605