我有 3d donut chart 表,在该图表中,我想在一片 donut 上单击(图表表面以及图表边缘的任何位置)并重定向到另一个 URl。
如果我想无条件单击 3d 圆环图上的任意位置(首先悬停到表面然后悬停在边缘)图表切片并执行一些操作,是否有任何解决方案。
有人可以帮助我吗?
**更新 **
Jsffidle:: https://jsfiddle.net/176anruf/12/
单击 3d 阴影而不将鼠标悬停在表面上,单击事件不起作用。
最佳答案
如果我理解您的问题,您希望在整个图表区域上单击事件。
那么事件需要添加到chart
堵塞:
chart: {
events: {
click: function(event) {
alert(' clicked\n' +
'Alt: ' + event.altKey + '\n' +
'Control: ' + event.ctrlKey + '\n' +
'Meta: ' + event.metaKey + '\n' +
'Shift: ' + event.shiftKey
);
}
}
};
Highcharts.chart('container', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45
},
events: {
click: function(event) {
alert(' clicked\n' +
'Alt: ' + event.altKey + '\n' +
'Control: ' + event.ctrlKey + '\n' +
'Meta: ' + event.metaKey + '\n' +
'Shift: ' + event.shiftKey
);
}
}
},
title: {
text: 'Contents of Highsoft\'s weekly fruit delivery'
},
subtitle: {
text: '3D donut in Highcharts'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 50,
point: {
events: {
click: function() {
alert("clicked");
}
}
}
},
},
series: [{
allowPointSelect: true,
name: 'Delivered amount',
data: [
['Bananas', 8],
['Kiwi', 3],
['Mixed nuts', 1],
['Oranges', 6],
['Apples', 8],
['Pears', 4],
['Clementines', 4],
['Reddish (bag)', 1],
['Grapes (bunch)', 1]
],
point: {
events: {
click: function(event) {
alert(this.x + " " + this.y);
}
}
}
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
关于highcharts - 3D 圆环图点击图表边缘的事件问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52204630/