Comment associer un événement à un seul objet? jqplot

Question

J'utilise jqplot pour dessiner des graphiques. C'est un outil génial, mais il manque une simple option clickhandler pour chaque graphique. Ses plugins comme surligneur, draggable et curseur enregistrent leur intérêt à capturer les événements click/mouse du canvas jqplot en s'ajoutant à jqplot.eventListenerHooks (eventListenerHooks.push (['jqplotClick', callback]), par exemple. ou 'jqplotMouseDown' ou tels sont également disponibles

Après avoir fait mon intrigue avec le .jqplot habituel $ (cible, de données, options);. puis-je faire cela

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

et assez sûr myFunc est appelé partout où je clique sur l'intrigue, avec event, neighbour, datapos et gridpos. Le voisin est le plus intéressant, il contient mon point de données s'il y avait un clic dessus. Ce sont les données dont j'ai besoin pour faire un popup près du gridpos avec des informations supplémentaires sur le point de donnée.

Mais le problème est de savoir si j'ai deux graphiques sur la même page et que je veux enregistrer différents rappels pour chaque jqplot. Comme c'est le cas maintenant, quand j'inscris la deuxième myFunc2, tous les clics sur la deuxième parcelle passent par myFunc aussi!

Dois-je apporter des modifications à jqplot? Des directions, quoi qu'il arrive?

Merci

Answer 1

Ce n'est pas bien documenté, mais vous pouvez trouver une discussion à ce sujet. here

Fondamentalement, vous devez créer des gestionnaires d'événements pour votre graphique avant en appelant jqplot pour créer le graphique réel. Pour ce faire, vous devez faire quelque chose comme ceci:

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

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

C'est juste un gestionnaire d'événements simple qui vérifie s'il y a un point de données voisin proche où vous avez cliqué. Voir un exemple de travail ici: http://jsfiddle.net/andrewwhitaker/PtyFG/

Mise à jour: Si vous voulez écouter uniquement les événements sur une parcelle donnée, vous pouvez faire quelque chose comme ceci:

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... 
}; 

où vous remplacer #chartdiv avec quel que soit le Id du graphique que vous voulez écouter les événements est. L'exemple a été mis à jour.

Mise à jour 2: On dirait que vous pouvez utiliser un événement bind régulier avec les événements de l'intrigue:

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

Exemple en utilisant cette méthode, avec 2 cartes:

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

espoir que aide!