中点击饼图切片上的事件？

Question

我正在尝试获取Highcharts饼图api的中间点击事件，但我无法在其api documentation中找到任何内容。

我创建了此测试，以证明您在单击切片时没有console.log，但是在您单击 ctrl + click时没有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事件。

Attach event to container

$(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>