highcharts:停止图表捕获鼠标事件，或捕获整个图表上的鼠标单击

Question

全部，

我在正在开发的网络应用程序中使用 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 轴)则无效- 轴、标题、图表元素周围的填充等)

那么 - 如何使整个图表可点击？

非常感谢!

Answer 1

我也遇到了同样的问题。

使用 webkit 检查器，我可以看到 Highcharts 将点击事件绑定(bind)到图表容器(具有“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