javascript - 使绘图在 Highcharts 中可点击

Question

我在 Highcharts 中工作并在图表上绘制形状(圆圈)。我想让圆圈可点击，但遇到一些问题。我尝试添加 onclick 事件，但在我看来，圆圈是在图表的背景上绘制的，并且没有接收单击事件。这是我的 fiddle 代码的链接。

http://jsfiddle.net/z23sswha/11/

$(function() {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        zoomType: 'x'
    },
     title: {
        text: 'Fruit Count'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: 'Fruits'
        }
    },
    series: [{
        name: 'John',
        data: [[Date.UTC(2014,5,25),5], [Date.UTC(2014,6,22),7], [Date.UTC(2014,7,9),3]]
    }]
});

addCircle(chart);

function click_chart(evt) {
    alert('byby');
}


function addCircle(crt) { // on complete
    var circleradius = 10;

    var xaxis=chart.xAxis[0];
    var yaxis =chart.yAxis[0];
    var xpos=xaxis.toPixels(Date.UTC(2014,5,25));
    var ypos=yaxis.toPixels(2);

// Render the circle
chart.renderer.circle(xpos, ypos, circleradius).attr({
    onclick: function(evt){
        alert('yo');
    },
    fill: 'red'

}).add();
}
});

任何关于如何让圈子听到点击事件的帮助都会很棒! 谢谢!

Answer 1

尝试使用on-function而是将监听器附加到您的圈子。

例如( JSFiddle demonstration ):

// Render the circle
chart.renderer.circle(xpos, ypos, circleradius)
.on('click', function() {
    alert('yo');
}).css({
    fill: 'red'
}).add();