jQuery/Flot: come si ottengono le coordinate di un punto dati?

Question

Attualmente sto esaminando l'esempio su http://people.iola.dk/olau/flot/examples/interacting.html ma non riesco a capire come ottenere le coordinate di un punto dati. Non farò clic sul grafico in modo che non possa fare uso del plotclick dell'evento. Ora la mia domanda: c'è un altro modo per ottenere le coordinate xey di un punto dati, senza fare clic? Utilizzerò il cursore jQuery per evidenziare diversi punti su un grafico e vorrei avere un suggerimento vicino ai punti dati.

Grazie in anticipo :)

Answer 1

Teoricamente ottenere x, y coordinate all'interno di un contenitore è il seguente:

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

Answer 2

Dalle flot API:

cose Vari sono farciti all'interno di un oggetto asse, ad es è possibile utilizzare getAxes(). xaxis.ticks per scoprire cosa le zecche sono per l'asse x. Altri due attributi utili sono le funzioni p2c e c2p, per la trasformazione dallo spazio di dati allo spazio del grafico di canvas e viceversa. Entrambi i valori restituiti sono offset con l'offset di stampa.

In combinazione con plot.offset() (l'offset dell'area della griglia rispetto al documento), si dovrebbe avere tutti gli strumenti necessari per capire il resto. plot.pointOffset() è anche utile. Restituisce la posizione di un punto relativo al div contenente.

Answer 3

Bit in ritardo su questo, ma ho eseguito questa funzione dopo aver tracciato il grafico come un modo di mettere le etichette sotto i miei punti di dati tracciati in un grafico a linee.

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

Questa è la parte superiore della testa, ma fondamentalmente, questa funzione passa attraverso tutte le datapoints e utilizza le funzioni P2C negli assi, allora aggiunge questo (con padding) per compensare del grafico stesso. Quindi usa solo la normale sovrapposizione del tooltip.

Anche se si utilizza questo in un grafico a barre è possibile impostare una larghezza del suggerimento, dargli un allineamento del testo del centro e quindi se si desidera che tutte le etichette siano in linea, basta inserire un solo numero negli yax funzione p2c. Quindi usa il padding graphy per posizionarlo dove vuoi.

Spero che questo aiuti qualcuno in futuro :)