2013-03-07 2 views
0

http://jsfiddle.net/jriggs/N6HGK/Highcharts - Нажмите событие не обжиг вне зоны участка

Для тиражирования, попробуйте нажать на область слева или справа от легенды.

Я также попытался использовать событие щелчка для Highcharts-0 и даже тег тела, но это, кажется, маскируется SVG

Highcharts код:

$(function() { 
    // create the chart 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      events: { 
       click: function(event) { 
        alert ('x: '+ event.xAxis[0].value +', y: '+ 
          event.yAxis[0].value); 
       } 
      }   
     }, 
     xAxis: { 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]   
     }] 
    }); 
}); 

$('#highcharts-0').click(function() { 
alert('outside the box'); 
}); 
$(document).click(function() { 
alert('body tag'); 
}); 

ответ

3

Вместо этого привяжите его к chart.container.
Затем вы можете просто переопределить событие своей функцией.

var originalEvent = chart.container.onclick; 
chart.container.onclick = function(e) { 
    // do what you want 
    originalEvent(e); 
} 

Demo

+0

Это, кажется, шаг в правильном направлении, за исключением того, что теперь щелчки события в серии захватываются диаграммой .container.onclick 'и не пузырь до событий нажмите (строка 7 в jsfiddle). Мне нужно иметь оба. Любые мысли по этому поводу? – jriggs

+0

@jriggs Щелчок по графику запускается только на участке графика. –

1

определение для функции мыши так как Highcharts 1.2.0:

Пожары при нажатии на фон участка. Это ключевое слово относится к самому объекту диаграммы. Один параметр, событие, передается функции . Это содержит общую информацию о событиях на основе jQuery или MooTools в зависимости от того, какая библиотека используется в качестве базы для Highcharts.

Таким образом, вы можете получить событие вне фоне сюжета ...

Ссылка: http://api.highcharts.com/highcharts#chart.events.click

К сожалению.

Xavier.

+0

Не знаете, почему кто-то отказался от объяснения, это, по-видимому, полезно, спасибо. – jriggs

-1

Возьмите взгляд на пример, который добавить событие нажмите на контейнер, но в документе готов и график работы структуры DOM.

$(document).ready(function(){ 

    $('#highcharts-0').click(function(){ 
    alert('a'); 
    }); 

}); 

http://jsfiddle.net/N6HGK/9/

0

Немного обходным путем, но я нашел самый простой способ для меня, чтобы сделать это, чтобы прикрепить одно событие щелчка к объекту диаграммы-контейнера, который Highcharts марок. Я не могу указать его идентификатор на создание диаграммы, но это первый ребенок первого ребенка в DIV вы оказанной его, например, если у вас:.

var options = { 
     chart: { 
      renderTo: someIdForDivFoo, 
     }, 
     ... 

вы бы тогда назвать это непосредственно после создания диаграммы:

DivFoo.children[0].children[0].addEventListener("click", function() { 
      //your click event logic 
     }); 

Это, кажется, забрать все события щелчка: серия, площадь участка, название, оси, этикетки, легенды и т.д. Надеюсь, что это помогает!

Смежные вопросы