highcharts：从捕捉鼠标事件，或捕获鼠标点击整个图表上

Question

所有，

我使用HighCharts在一个web应用程序我工作停止图表，通常，我非常喜欢它。

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

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

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

更详细的版本...

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

我想知道用户是否在该DIV内单击了ANYWHERE。

所以 - 最初我尝试给DIV附加一个“onclick”事件，但是这永远不会被解雇，大概是因为点击被HighChart困住了。

因此，在树立HighChart的代码，我添加了这个：

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

该工程确定IF用户点击绘图区内的某处，但如果她点击没有其他地方在图表中（例如，x轴，y轴，标题，图表元素周围的填充等）

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

非常感谢提前！

Answer 1

我有这个相同的问题。

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

只要你不希望任何在click事件的功能，你可以通过设置

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的扩展/插件，气泡单击事件出来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(); 
        } 
       } 
      } 
     } 
    } 
} 

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