highcharts：停止捕获鼠标事件的图表，或捕获鼠标点击整个图表 [英] highcharts: stop chart from trapping mouse events, or capture mouse click on the ENTIRE chart

问题描述

所有，

我正在使用HighCharts，并且通常我非常喜欢它。

然而，我很难弄清楚如何捕捉鼠标点击整个图表。

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

或者，我想完全禁用事件，所以我可以将事件置于容器中。

更详细的版本.. 。

我有一个包含HighChart的DIV。

我想知道用户是否点击 ANYWHERE 。

所以 - 最初我尝试在DIV上附加一个onclick事件，但从来没有被解雇了，大概是因为点击被HighChart困住。

因此，在设置HighChart的代码中，我添加了这个：

  var chart = new Highcharts.Chart（{
图表：{
 renderTo：container ，
 events：{
 click：function（event）{
 // do something 
} 
}，
 ... 
} 
 ... 
}）; 
  

这适用于图表用户在图表内的某处点击区域，但如果她在图表中的任何其他位置点击（例如，x轴，y轴，标题，图表元素周围的填充等），则不会显示。

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

非常感谢！

解决方案

我有同样的问题。

使用webkit检查器，我可以看到Highcharts将点击事件绑定到图表容器（具有'highcharts-container'类的div），这似乎干扰了点击。

假设您不想要在该点击事件中的任何功能，您可以通过设置

chart.container.onclick = null;
如OP所述，图表对象有一个'events'属性，当点击图形背景时应该触发它。
还有一个事件属性，用于单击该系列本身时触发的绘图选项。

例如，对于面积图：

  var chart = new Highcharts.Chart（{
 ... 
 plotOptions：{
 area：{
 events：{
 click：function（event）{
 //做点什么
} 
}，
 ... 
} 
} 
 ... 
}）; 
  

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

All,

I'm using HighCharts in a web app I'm working on, and generally, I like it very much.

However, I'm having a hard time figuring out how capture a mouse click on the ENTIRE chart.

In other words - I'd like to know when the user clicks ANYWHERE on the chart (e.g., the plot area, the title, the x- or y-axis, the margins and padding around the chart elements, etc.)

Or, I'd like to disable events altogether, so I can trap the event in the container itself.

More detailed version...

I have a DIV that contains my HighChart.

I want to know if the user clicks ANYWHERE within that DIV.

So - initially I tried attaching an "onclick" event to the DIV, but that never gets fired, presumably because the click is getting trapped by the HighChart.

So, in the code that sets up the HighChart, I added this:

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

This works OK IF the user clicks somewhere within the plot area, but not if she clicks anywhere else in the chart (e.g., the x-axis, the y-axis, the title, the padding around the chart elements, etc.)

So - how can I make the ENTIRE chart clickable?

Many thanks in advance!

解决方案

I had this same issue.

Using the webkit inspector I can see that Highcharts binds a click event to the chart container (the div with the 'highcharts-container' class), and this seems to interfere with clicking.

Provided you don't want any of the functionality in that click event, you can remove it by setting

chart.container.onclick = null;

Otherwise, you'll need to use the built-in highcharts event properties to set your callbacks. As the OP noted, there is an 'events' property for the chart object, which should trigger when clicking the plot background. There is also an event property for the plot options which triggers when clicking the series itself.

For example, for area plots:

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

More more info see: http://www.highcharts.com/ref/#plotOptions-area-events

这篇关于highcharts：停止捕获鼠标事件的图表，或捕获鼠标点击整个图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！