如何解决是否可以在图表JS中使用mouseenter和mouseleave事件?
现在,我在每个饼图中使用onHover
来添加一些缩放比例,但是我想使用mouseenter and 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>
解决方法
您的代码已经设计为在滑出鼠标时恢复到原始大小,但是您有一个细微的错误。
您需要在图表的外部定义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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。