[英]Is it possible to use mouseenter and mouseleave event in chart js?
現在我在每個餅圖中使用onHover
來添加一些縮放/縮放,但我想使用mouseenter and 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>
您的代碼已經設計為在鼠標移開時恢復到原始大小,但是您有一個微妙的錯誤。
您需要在圖表外定義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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.