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