¿Cómo asociar un evento con un solo objeto? jqplot

Question

Im usando jqplot para dibujar algunos gráficos. Es una gran herramienta, pero carece de una simple opción de manejo de clics para cada gráfico.

Sus complementos como resaltador, arrastrable y cursor registran su interés en capturar eventos de clic/mouse del lienzo jqplot agregándose a jqplot.eventListenerHooks (eventListenerHooks.push (['jqplotClick', callback]); por ejemplo. o 'jqplotMouseDown' o como también están disponibles

Después de hacer mi parcela con los $ .jqplot habitual (objetivo, los datos, las opciones);. entonces hacer esto

$.jqplot.eventListenerHooks.push(['jqplotClick', myFunc]);

y bastante seguro myFunc se llama cuando hago clic en la trama, con event, neighbour, datapos y gridpos. El vecino es el más interesante, contiene mi punto de datos si hubo un clic en él. Esta es la información que necesito para hacer una ventana emergente cerca de la gridpos con información adicional en el punto de datos.

Pero el problema es si tengo dos gráficos en la misma página y quiero registrar diferentes devoluciones de llamada para cada jqplot. Como ahora, cuando registro el segundo myFunc2, todos los clics en el segundo diagrama también pasan por myFunc.

¿Debo hacer cambios en jqplot? ¿Alguna dirección, en absoluto?

Gracias

Answer 1

Esto no está bien documentada, pero se puede encontrar una discusión al respecto here.

Básicamente, debe crear controladores de eventos para su gráfico antes de llamando a jqplot para crear el gráfico real. Para ello, es necesario hacer algo como esto:

var handler = function(ev, gridpos, datapos, neighbor, plot) { 
    if (neighbor) { 
     alert('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]); 
    } 
}; 

$.jqplot.eventListenerHooks.push(['jqplotClick', handler]); 

Eso es sólo un controlador de eventos simple que comprueba si hay un punto de datos vecina cerca de donde ha hecho clic. Ver un ejemplo de trabajo aquí: http://jsfiddle.net/andrewwhitaker/PtyFG/

Actualización: Si desea escuchar sólo a eventos sobre un terreno determinado, se podría hacer algo como esto:

var handler = function(ev, gridpos, datapos, neighbor, plot) { 
    if (plot.targetId === "#chartdiv") { 
     if (neighbor) { 
      alert('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]); 
     } 
    } 
    else if (plot.targetId === "#chart2div") { 
     .... 
    } 
    // etc... 
}; 

Dónde debería reemplazar #chartdiv con lo que el Id de la gráfica para la que quiere escuchar eventos es. El ejemplo ha sido actualizado.

Actualización 2: parece que se puede utilizar un bind evento regular con los eventos de la trama:

$("#chartdiv").bind("jqplotClick", function(ev, gridpos, datapos, neighbor) { 
    if (neighbor) { 
     alert('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]); 
    } 
}); 

Ejemplo usando este método, con 2 tablas:

http://jsfiddle.net/andrewwhitaker/PtyFG/5/

la esperanza de que ayuda!