jQuery/Flot: Wie erhalten Sie die Koordinaten eines Datenpunkts?

Question

Ich schaue mir gerade das Beispiel an http://people.iola.dk/olau/flot/examples/interacting.html, aber ich kann nicht herausfinden, wie man die Koordinaten eines Datenpunktes erhält. Ich werde nicht auf den Plot klicken, so dass ich den Ereignisplotclick nicht nutzen kann. Nun meine Frage: Gibt es eine andere Möglichkeit, die X- und Y-Koordinaten eines Datenpunktes zu erhalten, ohne zu klicken? Ich werde den jQuery-Schieberegler verwenden, um verschiedene Punkte in einem Diagramm hervorzuheben, und möchte einen Tooltip neben den Datenpunkten haben.

Vielen Dank im Voraus :)

Answer 1

Theoretisch x bekommen, y-Koordinaten in einem Container ist wie folgt:

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

Answer 2

Von den flot API:

Verschiedene Dinge sind in einem gestopft Achsenobjekt, z Sie könnten getAxes(). xaxis.ticks verwenden, um herauszufinden, was die Ticks für die Xaxis sind. Zwei weitere nützliche Attribute sind p2c und c2p, Funktionen zum Transformieren von Daten Punkt Raum auf den Leinwand Plot Raum und zurück. Beides gibt Werte zurück, die mit dem Plot-Offset versetzt sind.

In Kombination mit plot.offset() (die von der relativen Rasterfläche zu dem Dokument-Offset), sollten Sie alle Werkzeuge, die Sie den Rest herauszufinden, brauchen müssen. plot.pointOffset() ist auch nützlich. Es gibt die Position eines Punkts relativ zum enthaltenden div zurück.

Answer 3

Etwas spät, aber ich habe diese Funktion ausgeführt, nachdem ich das Diagramm gezeichnet habe, um Beschriftungen unter meine geplotteten Datenpunkte in einem Liniendiagramm zu setzen.

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

Dieses off ist die Spitze von meinem Kopf, aber im Grunde, diese Funktion durchläuft alle Datenpunkte und nutzt die p2c Funktionen in den Achsen, dies fügt dann (mit etwas Padding) des Graphen selbst zu kompensieren. Dann wird nur das normale Tooltip-Overlay verwendet.

Auch wenn Sie dies in einem Balkendiagramm verwenden, können Sie eine Breite der QuickInfo festlegen, geben Sie eine Textausrichtung der Mitte und dann wenn Sie alle Beschriftungen in einer Zeile möchten dann nur eine einzige Zahl in die Yaxis P2C-Funktion. Verwenden Sie dann das Grafikpadding, um es an der gewünschten Position zu positionieren.

Hoffe das hilft jemandem in der Zukunft :)