0

http://jsfiddle.net/jriggs/N6HGK/

要复制，请尝试单击图例左侧或右侧的区域。

我也尝试过对 highcharts-0 甚至 body 标签使用 click 事件，但这似乎被 svg 掩盖了

高图代码：

$(function () {
    // create the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            events: {
                click: function(event) {
                    alert ('x: '+ event.xAxis[0].value +', y: '+
                          event.yAxis[0].value);
                }
            }        
        },
        xAxis: {
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});

$('#highcharts-0').click(function() {
alert('outside the box');
});
$(document).click(function() {
alert('body tag');
});
4

4 回答 4

3

将其绑定到chart.container。
然后你可以用你的函数简单地覆盖事件。

var originalEvent = chart.container.onclick;
chart.container.onclick = function(e) {
    // do what you want
    originalEvent(e);
}

演示

于 2013-03-08T00:17:35.967 回答
1

自 Highcharts 1.2.0 以来，click 函数的定义是：

单击绘图背景时触发。this 关键字是指图表对象本身。一个参数，事件，被传递给函数。这包含基于 jQuery 或 MooTools 的常见事件信息，具体取决于哪个库用作 Highcharts 的基础。

所以你可以在情节背景之外获得事件......

参考：http ://api.highcharts.com/highcharts#chart.events.click

很遗憾。

泽维尔。

于 2013-03-07T23:44:40.713 回答
0

有点迂回的方式，但我发现最简单的方法是将单击事件附加到 highcharts 标记的图表容器对象。我似乎无法在图表创建时指定它的 id，但它是您渲染它的 div 的第一个孩子的第一个孩子。例如，如果您有：

 var options = {
        chart: {
            renderTo: someIdForDivFoo,
        },
        ...

然后，您可以在创建图表后直接调用它：

 DivFoo.children[0].children[0].addEventListener("click", function () {
            //your click event logic
        });

这似乎收集了所有点击事件：系列、情节区域、标题、轴、标签、图例等。希望这会有所帮助！

于 2014-11-01T00:43:31.493 回答
-1

看一下将事件单击添加到容器但在文档就绪和图表运行 DOM 结构中的示例。

$(document).ready(function(){

    $('#highcharts-0').click(function(){
    alert('a');
    });

});

http://jsfiddle.net/N6HGK/9/

于 2013-06-18T14:34:28.043 回答