javascript - 是否可以在图表 js 中使用 mouseenter 和 mouseleave 事件？

Question

现在我在每个饼图中使用 onHover 来添加一些比例/缩放，但我想使用 mouseenter 和 mouseleave。因此，在 mouseenter 上，每个饼图都会添加一些比例/缩放，而在 mouseleave 上，我希望它恢复到原来的状态。

mouseenter-mouseleave 或 mouseover-mouseout 都可以。

这是代码笔: 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>

Answer 1

您的代码已设计为在鼠标移出时返回到原始大小，但您有一个细微的错误。

您需要在图表 之外定义段 变量。保存对段的引用后，将触发 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>