12

全部，

我在我正在开发的网络应用程序中使用 HighCharts，一般来说，我非常喜欢它。

但是，我很难弄清楚如何捕获整个图表上的鼠标点击。

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

或者，我想完全禁用事件，以便将事件捕获在容器本身中。

更详细的版本...

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

我想知道用户是否点击了该DIV中的任何地方。

所以 - 最初我尝试将“onclick”事件附加到 DIV，但从未被触发，大概是因为点击被 HighChart 捕获。

因此，在设置 HighChart 的代码中，我添加了以下内容：

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

如果用户单击绘图区域内的某个位置，这可以正常工作，但如果她单击图表中的其他任何位置（例如，x 轴、y 轴、标题、图表元素周围的填充等）

那么 - 我怎样才能使整个图表可点击？

提前谢谢了！

4

3 回答 3

9

我有同样的问题。

使用 webkit 检查器，我可以看到 Highcharts 将单击事件绑定到图表容器（具有“highcharts-container”类的 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

于 2012-08-10T14:25:36.483 回答
5

我遇到了这个问题，并为 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();
                    }
                }
            }
        }
    }
}
于 2014-04-01T22:47:17.873 回答
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();
    });
});
于 2015-06-04T20:18:22.243 回答