Question

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

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

Highcharts代码：

$(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');
});

Answer 1

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

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

Demo

Answer 2

自Highcharts 1.2.0以来点击功能的定义是：

单击绘图背景时触发。 this关键字引用图表对象本身。一个参数event传递给功能。这包含基于jQuery或的常见事件信息 MooTools取决于使用哪个库作为基础 Highcharts。

所以你可以在剧情背景之外得到这个事件......

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

不幸的是

济。

Answer 3

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

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

然后在创建图表后直接调用它：

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

这似乎可以获取所有点击事件：系列，情节区域，标题，轴，标签，图例等。希望这会有所帮助！

Answer 4

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

$(document).ready(function(){

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

});

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

Highcharts - 点击事件不在绘图区域外发射

4 个答案: