jQuery/Flot: Làm thế nào để bạn có được tọa độ của một datapoint?

Question

Tôi hiện đang xem ví dụ tại http://people.iola.dk/olau/flot/examples/interacting.html nhưng tôi không thể tìm ra, cách lấy tọa độ của một điểm dữ liệu. Tôi sẽ không nhấp vào Lô nên tôi không thể sử dụng cốt truyện sự kiện. Bây giờ câu hỏi của tôi: là có một cách khác để có được các tọa độ x và y của một datapoint, mà không cần nhấn? Tôi sẽ sử dụng thanh trượt jQuery để làm nổi bật các điểm khác nhau trên biểu đồ và muốn có một chú giải công cụ bên cạnh các điểm dữ liệu.

Cảm ơn trước :)

Answer 1

Về mặt lý thuyết nhận được x, y tọa độ bên trong một container được như sau:

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

Answer 2

Từ flot API:

điều khác nhau được nhồi bên trong một đối tượng trục, ví dụ bạn có thể sử dụng getAxes(). xaxis.ticks để tìm hiểu những gì bọ ve cho xaxis. Hai thuộc tính khác hữu ích là các hàm p2c và c2p, để chuyển đổi từ dữ liệu không gian điểm sang không gian lô vải và ngược lại. Cả hai trả về các giá trị được bù đắp với chênh lệch lô.

Kết hợp với plot.offset() (độ lệch của vùng lưới so với tài liệu), bạn nên có tất cả các công cụ bạn cần để tìm phần còn lại. plot.pointOffset() cũng hữu ích. Nó trả về vị trí của một điểm liên quan đến div chứa.

Answer 3

Bit trễ này nhưng tôi chạy chức năng này sau khi vẽ biểu đồ như một cách để đặt nhãn bên dưới các điểm dữ liệu được vẽ trong biểu đồ đường.

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

Đây là ra khỏi đỉnh đầu của tôi nhưng về cơ bản, chức năng này đi qua tất cả các datapoints và sử dụng các chức năng p2c ở các trục, sau đó nó sẽ thêm này (với một số đệm) để bù đắp của đồ thị chính nó. Sau đó, nó chỉ sử dụng lớp phủ tooltip bình thường. Ngoài ra nếu sử dụng điều này trên biểu đồ thanh, bạn có thể đặt chiều rộng của chú giải công cụ, cho nó căn chỉnh văn bản của trung tâm và sau đó nếu bạn muốn tất cả các nhãn nằm trong một dòng thì chỉ cần đặt một số trong yaxis chức năng p2c. Sau đó, sử dụng đệm đồ thị để định vị nó ở vị trí bạn muốn.

Hy vọng điều này sẽ giúp ai đó trong tương lai :)