中键单击饼图切片上的事件?

Question

我正在尝试获取Highcharts饼图API的中键单击事件，但是在他们的API文档中找不到任何内容。

我创建此测试是为了演示中键单击切片时没有console.log，但当您ctrl+单击或常规单击它时，会出现console.log。

$(function () {
$('#container').highcharts({
chart: {
type: 'pie'
},

plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
console.log('clicked on y: ' + this.y);
},
}
}
}
},

series: [{
data: [{
y: 29.9
}, {
y: 71.5
}, {
y: 106.4
}]        
}]
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

有没有办法在我中键单击饼图切片时触发事件？

Answer 1

其他由highchart 给出的默认事件，如click，您还可以在容器上附加事件。在您的情况下，它可以是mousedown事件。

将事件附加到容器

$(function () {
$('#container').highcharts({
chart: {
type: 'pie'
},

plotOptions: {
series: {
cursor: 'pointer',                
}
},

series: [{
data: [{
y: 29.9
}, {
y: 71.5
}, {
y: 106.4
}]        
}]
});
});
$(document).on('mousedown', '#container path', function (e) {
if(e.which==2)
console.log('Middle click on slice '+e.target.point.x+ " value is "+e.target.point.y);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>