highcharts：从捕捉鼠标事件停止图，或捕捉鼠标点击整个图表上(highcharts: sto

所有，

我使用的Web应用程序我工作HighCharts，一般，我非常喜欢它。

不过，我有一个很难搞清楚如何捕获整个图上点击鼠标。

换言之 - 我想，当用户点击ANYWHERE在图表上知道（例如，绘图区，标题，x轴或y轴时，边距和填充围绕所述图表元素等）

或者，我想完全禁用事件，所以我就能够在容器本身的事件。

更详细的版本...

我有一个包含我的HighChart一个DIV。

我想知道，如果用户点击任何地方 ，DIV内。

所以 - 最初我试图附加一个“点击”事件的DIV，但永远不会被解雇，大概是因为点击是被困在HighChart。

因此，在树立HighChart的代码，我加了这一点：

var chart = new Highcharts.Chart({
    chart: {
        renderTo: "container",
        events: {
            click: function(event) {
                // do something
            }
        },
        ...
    }
    ...
});

如果用户点击某个小区区域内，但如果她不点击任何地方在图表中该工程确定（例如，x轴，y轴，标题，周围的图表元素填充等）

所以-我怎样才能使整个图表的点击？

提前谢谢了！

Answer 1:

我有同样的问题。

使用WebKit的检查，我可以看到Highcharts结合一个click事件图表容器（与“highcharts容器”类的div），这似乎与点击干涉。

只要你不希望任何的在单击事件的功能，你可以通过设置将其删除

chart.container.onclick = null;

否则，你需要使用内置highcharts事件属性设置您的回调。由于OP指出，有一个图表对象，单击绘图背景时会触发一个“事件”属性。还为点击系列本身时触发剧情选项中的事件属性。

例如，对于区域地块：

var chart = new Highcharts.Chart({
    ...
    plotOptions: {
        area: {
            events: {
                click: function(event) {
                    // do something
                }
            },
        ...
        }
    }
    ...
});

更多详细信息请参阅： http://www.highcharts.com/ref/#plotOptions-area-events

Answer 2:

我碰到了这一点，并写了highcharts 3的扩展/插件，点击气泡从事件的highcharts：

/*global Highcharts*/
(function (Highcharts) {
    "use strict";

    Highcharts.wrap(Highcharts.Pointer.prototype, 'onContainerClick', function (original, e) {
        var pointer = this,
            parent = pointer.chart.container.parentNode,
            bubbleUp = true;

        // Add a method to the event to allow event handlers to prevent propagation if desired
        e.swallowByHighCharts = function() { bubbleUp = false; };

        // Call the original event
        original.apply(this, Array.prototype.slice.call(arguments, 1));

        // Trigger the event on the container's parent (to bubble the event out of highcharts)
        // unless the user wanted to stop it
        if (bubbleUp && typeof parent !== 'undefined' && parent) {
            jQuery(pointer.chart.container.parentNode).trigger(e);
        }
    });

}(Highcharts));

这个增加，所有点击事件都冒泡了highcharts容器。触发它的容器本身就使得一吨循环因highcharts和jQuery如何与事件激发互动，并且至少在我来说，我实际上没有反正用作渲染目标元素上的任何处理。

关于swallowByHighCharts额外位允许在需要时禁用新的行为 - 即

config = {
    chart: { ... }
    plotOptions: {
        series: {
            point: {
                events: {
                    click: function(e) {
                        // Don't pass along clicks on series points for one reason or another
                        e.swallowByHighCharts();
                    }
                }
            }
        }
    }
}

Answer 3:

一个非常晚的答案，但还是有必要的，在我看来。

该highcharts文档http://api.highcharts.com/highcharts#chart.events.click

是指一个脚本，简单地转发的事件对于图表的容器： http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/事件容器/

$(function () {
    $('#chart1').highcharts({
        ...
    });


    $('.chart-container').bind('mousedown', function () {
        $(this).toggleClass('modal');
        $('.chart', this).highcharts().reflow();
    });
});

文章来源: highcharts: stop chart from trapping mouse events, or capture mouse click on the ENTIRE chart