jQuery/Flot: Comment obtenez-vous les coordonnées d'un point de donnée?

Question

Je regarde actuellement l'exemple au http://people.iola.dk/olau/flot/examples/interacting.html mais je ne peux pas comprendre, comment obtenir les coordonnées d'un point de données. Je ne vais pas cliquer sur le tracé pour que je ne puisse pas utiliser l'événement plotclick. Maintenant, ma question: existe-t-il un autre moyen d'obtenir les coordonnées x et y d'un point de donnée, sans cliquer? J'utiliserai le curseur jQuery pour mettre en évidence différents points sur un graphique et souhaiterais avoir une info-bulle à côté des points de données.

Merci à l'avance :)

Answer 1

En théorie obtenir coordonnées x, y dans un conteneur est comme suit:

$(function() { 
     $('#container').mousemove(function (e) { 
      $('.xPos').text(e.clientX - $('#container').offset().left); 
      $('.yPos').text(e.clientY - $('#container').offset().top); 
     }); 
    }); 

Answer 2

Des flot API:

Diverses choses sont bourrés dans une objet d'axe, p.ex. vous pouvez utiliser getAxes(). xaxis.ticks pour trouver les coches pour le xaxis. Deux autres attributs utiles sont p2c et c2p, fonctions pour transformer des données point d'espace à l'espace de la parcelle de toile et à l'arrière. Les deux renvoie des valeurs compensées avec le décalage de tracé.

Combiné avec plot.offset() (le décalage de la zone de la grille par rapport au document), vous devriez avoir tous les outils dont vous avez besoin pour comprendre le reste. plot.pointOffset() est également utile. Il renvoie la position d'un point par rapport au div contenant.

Answer 3

Bit en retard sur ce point, mais j'ai couru cette fonction après avoir tracé le graphique comme un moyen de mettre des étiquettes sous mes points de données dans un graphique linéaire.

$(document).ready(function(){ 
$(function(){ 
     var data = [ 
      {data: [[1, 5], [2, 10], [3, 15], [4, 15], [5, 10], [6, 5]], color: '#3a8df6'}, 
      {data: [[1, 52], [2, 42], [3, 32], [4, 32], [5, 42], [6, 52]], color: '#ff0000'} 
      ]; 
     var options = { 
       lines: {show: true}, 
       yaxis: {tickDecimals: 0, min: 0, max: 100, autoscaleMargin: null} 
      }; 
    var graph = $.plot($('#graph'), data, options); 
    var points = graph.getData(); 
    var graphx = $('#graph').offset().left; 
    graphx = graphx + 30; // replace with offset of canvas on graph 
    var graphy = $('#graph').offset().top; 
    graphy = graphy + 10; // how low you want the label to hang underneath the point 
    for(var k = 0; k < points.length; k++){ 
      for(var m = 0; m < points[k].data.length; m++){ 
      showTooltip(graphx + points[k].xaxis.p2c(points[k].data[m][0]), graphy + points[k].yaxis.p2c(points[k].data[m][1]),points[k].data[m][1]) 
      } 
     } 
}); 
}); 
function showTooltip(x,y,contents){ 
     $('<div id="tooltip">' + contents + '</div>').css({ 
      position: 'absolute', 
      display: 'none', 
      top: y, 
      left: x 
     }).appendTo("body").fadeIn(200); 
} 

C'est du haut de ma tête, mais au fond, cette fonction passe par tous les points de données et utilise les fonctions de P2C dans les axes, il ajoute ceci (avec un peu de rembourrage) pour compenser du graphique lui-même. Ensuite, il utilise simplement la superposition d'info-bulle normale. De plus, si vous l'utilisez sur un diagramme à barres, vous pouvez définir une largeur de l'info-bulle, lui donner un alignement de centre et ensuite, si vous souhaitez que toutes les étiquettes soient alignées, placez simplement un nombre unique dans l'axe. fonction p2c. Ensuite, utilisez le rembourrage graphique pour le positionner où vous voulez.

Espérons que cela aidera quelqu'un dans le futur :)