Highcharts: detienen gráfico a partir de la captura los eventos del ratón o haga clic en la captura del ratón en el gráfico TODA

Question

Todo,

estoy usando Highcharts en una aplicación web que estoy trabajando, y en general, me gusta mucho.

Sin embargo, estoy teniendo dificultades para averiguar cómo capturar un clic del mouse en el cuadro COMPLETO.

En otras palabras, me gustaría saber cuándo el usuario hace clic en DONDEQUIERA en el gráfico (por ejemplo, el área de trazado, el título, el eje xey, los márgenes y el relleno alrededor de los elementos del gráfico, etc. .)

O, me gustaría desactivar los eventos por completo, por lo que puedo atrapar el evento en el contenedor.

versión más detallada ...

que tienen un DIV que contiene mi HighChart.

Quiero saber si el usuario hace clic en cualquier lugar dentro de ese DIV.

Por lo tanto, inicialmente intenté conectar un evento "onclick" al DIV, pero nunca se dispara, presumiblemente porque el clic queda atrapado por HighChart.

Por lo tanto, en el código que configura el HighChart, añadí esto:

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

Esto funciona bien SI el usuario hace clic en algún lugar dentro del área parcela, pero no si se hace clic en otro sitio en el gráfico (por ejemplo, el eje x, el eje y, el título, el relleno alrededor de los elementos del gráfico, etc.)

Entonces, ¿cómo puedo hacer que el ENTIRE haga clic en el gráfico?

¡Muchas gracias de antemano!

Answer 1

Tuve este mismo problema.

Usando el inspector de webkit puedo ver que Highcharts vincula un evento de clic al contenedor de gráfico (el div con la clase 'highcharts-container'), y esto parece interferir con el clic.

Siempre y cuando no desea ninguna de las funciones en ese evento de clic, puede eliminarlo mediante el establecimiento de

chart.container.onclick = null;

De lo contrario, tendrá que utilizar el incorporado en las propiedades de evento a Highcharts establece tus devoluciones de llamada. Como se indicó el OP, hay una propiedad de 'eventos' para el objeto del gráfico, que se debe activar al hacer clic en el fondo de la gráfica. También hay una propiedad de evento para las opciones de trazado que se activa al hacer clic en la serie en sí.

Por ejemplo, para parcelas de área:

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

Más más información ver: http://www.highcharts.com/ref/#plotOptions-area-events

Answer 2

me encontré con esto, y escribió una extensión/plugin para Highcharts 3 que las burbujas haga clic en eventos de 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)); 

Con esto agregado, todos los eventos de clic se borran del contenedor de los charts. Dispararlo en el contenedor en sí causa una tonelada de bucles debido a la forma en que los gráficos altos y jquery interactúan con el disparo de eventos, y al menos en mi caso, de todos modos, no tenía ningún controlador en el elemento utilizado como objetivo de renderizado.

El bit adicional sobre swallowByHighCharts permite deshabilitar el nuevo comportamiento, si es necesario - es decir,

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

Una respuesta muy tarde, pero aún es necesario, en mi opinión.

La documentación Highcharts http://api.highcharts.com/highcharts#chart.events.click

se refiere a una secuencia de comandos que simplemente reenvía un evento para el contenedor del cuadro: 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(); 
    }); 
});