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
            }
        },
        ...
    }
    ...
});

这样可以正常 IF 用户点击绘图区域内的某个位置，但如果点击图表中的任何其他位置（例如，x轴，y）则无法点击-axis，标题，图表元素周围的填充等。）

那么 - 如何才能使整体图表可以点击？

非常感谢提前！

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

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/events-container/

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


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

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

3 个答案: