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

Question

现在我在每个馅饼中使用 onHover 添加一些 scale/zoom，但我想使用 mouseenter and mouseleave。所以在 mouseenter 每个馅饼上它会添加一些 scale/zoom，在 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

您的代码已设计为 return 鼠标移开时的原始大小，但您有一个细微的错误。

您需要在图表外定义segment变量。保存对段的引用后，mouseout 事件将触发，onHover 处理程序将 return 饼图恢复到其原始大小。

请参阅下面的示例：

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>

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

Is it possible to use mouseenter and mouseleave event in chart js?

javascript

jquery

charts

pie-chart

chart.js