javascript - jQuery/Flot: ¿Cómo se obtienen las coordenadas de un punto de datos?

Actualmente estoy mirando el ejemplo en http://people.iola.dk/olau/flot/examples/interacting.html pero no puedo averiguar cómo obtener las coordenadas de un punto de datos. No haré clic en el gráfico, así que no puedo usar el evento plotclick. Ahora mi pregunta: ¿hay otra manera de obtener las coordenadas x e y de un punto de datos, sin hacer clic? Usaré el deslizador de jQuery para resaltar diferentes puntos en un gráfico y me gustaría tener una información sobre herramientas junto a los puntos de datos.

Gracias de antemano :)

Respuesta #1

Un poco tarde con esto, pero ejecuté esta función después de trazar el gráfico como una forma de colocar etiquetas debajo de mis puntos de datos trazados en un gráfico de líneas.

$(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);
 } 

Esto es improvisado, pero básicamente, esta función recorre todos los puntos de datos y utiliza las funciones p2c en los ejes, luego añade esto (con algo de espacio) al desplazamiento del propio gráfico. Luego simplemente utiliza la superposición normal de la información sobre herramientas.

También, si se usa esto en un gráfico de barras, puedes establecer un ancho para el tooltip, darle una alineación de texto centrada y luego, si quieres que todas las etiquetas estén en una línea, simplemente pon un solo número en la función yaxis p2c. Luego usa el padding de grafy para posicionarlo donde quieras.

Espero que esto ayude a alguien en el futuro :)

Respuesta #2

Desde la API de flot:

Varias cosas están metidas dentro de un objeto axis, por ejemplo, podrías usar getAxes().xaxis.ticks para averiguar cuáles son las marcas para el eje x. Otros dos atributos útiles son p2c y c2p, funciones para transformar desde el espacio de puntos de datos al espacio del gráfico en el lienzo y viceversa. Ambos devuelven valores que están desplazados con el desplazamiento del gráfico.

Combinado con plot.offset() (el desplazamiento del área de la cuadrícula respecto al documento), deberías tener todas las herramientas que necesitas para averiguar el resto. plot.pointOffset() también es útil. Devuelve la posición de un punto respecto al div contenedor.