如何解决当您将鼠标悬停在图表js中的每个饼图上时,是否有可能使阴影成为阴影?
现在,我在每个饼图中使用onHover
来添加比例/缩放,但是当您将其悬停在每个饼图上时,我想添加一些boxShadow
,并在鼠标离开/鼠标移开时将其删除在上面。
下面是代码的snippet
。
更新:
- 它现在可以正常工作:已添加chartjs插件样式和代码段 已更新。thx
谢谢大家!
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'
},hoverInnerGlowWidth: 20,hoverInnerGlowColor: 'rgba(146,151,164,.5)',hoverOuterGlowWidth: 20,hoverOuterGlowColor: 'rgba(127,133,1)'
}]
},options: {
legend: {
display: false
},layout: {
padding: 15
},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>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-style@0.5.0/dist/chartjs-plugin-style.min.js"></script>
<div class="container p-4">
<div class="chart-pie position-relative">
<canvas id="chartPie"></canvas>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。