javascript - jQuery/Flot：如何獲取數據點的座標？

我目前正在查看這個範例：http://people.iola.dk/olau/flot/examples/interacting.html，但我無法弄清楚如何獲取數據點的座標。我不會點擊圖表，所以無法使用 plotclick 事件。現在我的問題是：有沒有其他方法在不點擊的情況下獲取數據點的 x 和 y 座標？我會使用 jQuery 滑桿來高亮圖表上的不同點，並希望在數據點旁邊顯示工具提示。

提前感謝 :)

答案＃1

有點晚了，但我在繪製圖表後運行了這個函數，作為在折線圖中將標籤放在繪製的數據點下方的一種方法。

$(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 的填充來將它定位到你想要的位置。

希望這對未來的某個人有幫助 :)

答案＃2

來自 flot API：

各種東西都被放入一個軸對象中，例如，你可以使用 getAxes().xaxis.ticks 來找出 x 軸的刻度。另外兩個有用的屬性是 p2c 和 c2p，它們是從數據點空間轉換到畫布繪圖空間以及相反方向的函數。兩者返回的值都會帶有繪圖偏移量。

結合 plot.offset()（網格區域相對於文件的偏移），你應該擁有所有需要的工具來確定其餘部分。plot.pointOffset() 也很有用。它返回一個點相對於包含它的 div 的位置。