highcharts:停止图表捕获鼠标事件,或者在整个图表上捕获鼠标单击

Question

所有,

我在我正在使用的网络应用程序中使用HighCharts,一般来说,我非常喜欢它.

但是,我很难弄清楚如何在整个图表上捕获鼠标.

换句话说 - 我想知道用户何时点击图表上的任何地方(例如,绘图区域,标题,x轴或y轴,图表元素周围的边距和填充等)

或者,我想完全禁用事件,所以我可以将事件捕获到容器本身.

更详细的版本......

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

我想知道用户是否在该DIV中单击ANYWHERE.

所以 - 最初我尝试将一个"onclick"事件附加到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-container'类的div),这似乎会干扰点击.

如果您不想要该单击事件中的任何功能,则可以通过设置将其删除

chart.container.onclick = null;

否则,您需要使用内置的highcharts事件属性来设置回调.正如OP所指出的那样,图表对象有一个'events'属性,当点击绘图背景时应触发该属性.还有一个用于绘图选项的事件属性,在单击系列本身时触发.

例如,对于面积图:

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编写了一个扩展/插件,用于点击高级图表中的事件:

/*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容器中冒出来.由于高图和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();
                    }
                }
            }
        }
    }
}