jQuery/Flot：你如何得到一個數據點的座標？

我目前正在看http://people.iola.dk/olau/flot/examples/interacting.html的例子，但我無法弄清楚，如何獲取數據點的座標。我不會點擊劇情，因此我無法使用劇情劇本。現在我的問題：是否有另一種方式來獲取數據點的x和y座標，而不點擊？我將使用jQuery滑塊來突出顯示圖形上的不同點，並希望在數據點旁邊有一個工具提示。jQuery/Flot：你如何得到一個數據點的座標？

感謝提前:)

來源

2010-06-03 ndee

理論上得到x，y座標內的容器如下：

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

來源

2010-06-03 10:25:02 XGreen

從flot API：

各種事物的內部塞滿軸對象，例如您可以使用 getAxes（）。xaxis.ticks來查找是否爲xaxis。 另外兩個有用的屬性是p2c和c2p，函數用於將數據從點空間轉換爲畫布圖空間並返回。兩者均返回值爲的偏移量與圖解偏移量。

與plot.offset()結合（相對於文檔網格區域的偏移量），你應該有你需要弄清楚其餘的工具。 plot.pointOffset()也是有用的。它返回一個點相對於包含div的位置。

來源

2010-08-02 20:09:42 ntownsend

反過來呢？如果我有x偏移量，Flot可以提供數據值嗎？ – 2013-01-11 19:10:04

這點遲了，但是我在繪製圖表之後運行了這個函數，這是將標籤放置在線圖中繪製的數據點下方的一種方式。

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

這是我的頭的頂部，但基本上，該函數經過所有的數據點，並使用在所述軸上的P2C的功能，然後將其添加本（有一些填充）圖本身來抵消。然後它只是使用正常的工具提示覆蓋。

此外，如果在條形圖上使用它，您可以設置工具提示的寬度，給它一個文本對齊的中心，然後如果你想要所有的標籤都在一行，那麼只需在yaxis中放一個數字p2c功能。然後使用graphy填充將其放在需要的位置。

希望這可以幫助未來的人:)

來源

2011-06-14 10:55:12

jQuery/Flot：你如何得到一個數據點的座標？

回答

相關問題