Nhãn dữ liệu nổi

Question

Tôi đang cố gắng tạo biểu đồ dạng đường bằng Flot, nhưng tôi muốn nhãn dữ liệu hiển thị trên biểu đồ - nghĩa là tôi muốn giá trị của mỗi điểm xuất hiện bên cạnh điểm đó. Tôi cảm thấy như thế này nên là một lựa chọn, nhưng không thể tìm thấy nó trong API. Tôi chỉ thiếu một cái gì đó, hoặc không ai biết một workaround?

Xin cảm ơn trước.

Answer 1

Sau đây là cách tôi đã thêm tính năng này, trong đó có một hiệu ứng hình ảnh động thú vị:

var p = $.plot(...); 

$.each(p.getData()[0].data, function(i, el){ 
    var o = p.pointOffset({x: el[0], y: el[1]}); 
    $('<div class="data-point-label">' + el[1] + '</div>').css({ 
    position: 'absolute', 
    left: o.left + 4, 
    top: o.top - 43, 
    display: 'none' 
    }).appendTo(p.getPlaceholder()).fadeIn('slow'); 
}); 

Bạn có thể di chuyển vị trí và hiển thị css vào một bản định kiểu.

Answer 2

Tính năng bạn muốn được yêu cầu here trong nhóm Google Flot. Dường như nó chưa từng được triển khai (không có gì trong API về việc đặt bất kỳ nhãn nào bên trong biểu đồ). Tôi nghĩ rằng câu trả lời cho câu hỏi của bạn là Không, lúc này không thể hiển thị các giá trị bên cạnh các điểm nhất định trên các dòng bên trong biểu đồ. Ole Larson, nhà phát triển đầu trên Flot, đã đề cập rằng việc hiển thị các nhãn bên trong biểu đồ khác với bất kỳ điều gì khác trên FLOT và họ sẽ phải suy nghĩ về cách mở rộng các tham số API/lô để thực hiện điều đó.

Điều đó nói rằng, bạn có thể muốn đăng câu hỏi trên Flot forum hoặc đưa ra đề xuất trên bug-tracker cho tính năng mới. Ole Larson thực sự rất giỏi trong việc tự mình trả lời tất cả các câu hỏi, lỗi và đề xuất.

Answer 3

Nếu bất cứ ai khác đang tìm kiếm một giải pháp nhanh chóng, xem plugin này:

http://sites.google.com/site/petrsstuff/projects/flotvallab

Answer 4

Có vẻ như flot-valuelabels plugin là một ngã ba của một số previous flot plugin - nhưng mã được phân chia sẽ hiển thị các nhãn trên canvas. Bạn có thể thấy một bản demo về những gì trông giống như trên trang wiki của Github của plugin, here (nó trông khá dễ chịu cho mắt).

Answer 5

function redrawplot() { 
    $('.tt1').remove(); 
    var points = plot.getData(); 
    var graphx = $('#placeholder').offset().left; 
    graphx = graphx + 30; // replace with offset of canvas on graph 
    var graphy = $('#placeholder').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 = 1; m < points[k].data.length-1; m++){ 
      if(points[k].data[m][0] != null && points[k].data[m][1] != null){ 
        if ((points[k].data[m-1][1] < points[k].data[m][1] && points[k].data[m][1] > points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] < -50 || points[k].data[m][1] - points[k].data[m+1][1] > 50)) { 
           showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) - 35,points[k].data[m][1], points[k].color); 
       } 
           if ((points[k].data[m-1][1] > points[k].data[m][1] && points[k].data[m][1] < points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] > 50 || points[k].data[m][1] - points[k].data[m+1][1] < -50)) { 
           showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) + 2,points[k].data[m][1], points[k].color); 
           } 
          } 
     } 
     } 

} 

function showTooltip1(x,y,contents, colour){ 
    $('<div class=tt1 id="value">' + contents + '</div>').css({ 
     position: 'absolute', 
     display: 'none', 
     top: y, 
     left: x, 
     'border-style': 'solid', 
     'border-width': '2px', 
     'border-color': colour, 
     'border-radius': '5px', 
     'background-color': '#ffffff', 
     color: '#262626', 
     padding: '0px', 
     opacity: '1' 
    }).appendTo("body").fadeIn(200); 
}