Nhãn dữ liệu jQuery/nhãn trục trên đầu trang của biểu đồ

Question

Có cách nào để phủ nhãn trục x và trục y vào biểu đồ jQuery Flot không. Vì vậy, tôi muốn các nhãn không ở bên ngoài, bên cạnh biểu đồ, nhưng trên đầu của biểu đồ.

Ví dụ sau tạo một div lớp phủ trên đỉnh của đồ thị cho các chú thích: http://people.iola.dk/olau/flot/examples/annotating.html

Có cách nào đơn giản của grabbing văn bản và định dạng của một trục từ bên trong flot và tạo ra như một lớp phủ ngoài nó? Hoặc, có thể có cách nào khác tốt hơn để chồng các nhãn trục lên trên biểu đồ không?

Answer 1

Một cách không đặc biệt sạch sẽ và đặc biệt sẽ không hoạt động tốt nếu bạn định hiển thị nhãn dấu x và trục cùng một lúc, là đặt tùy chọn labelMargin trên grid thành số âm giá trị.

var plot = $.plot(placeholder, data, { 
    ... 
    grid: { ..., labelMargin: -20, ... } 
    ... 
}); 

---

Một ý tưởng thứ hai có thể là để lấy tất cả div 's có class="tickLabel" sau khi biểu đồ đã được vẽ. Và sau đó "thủ công" thay đổi vị trí CSS của chúng.

$("div.tickLabel").each(function(i,ele) { 
    ele = $(ele); 
    if (ele.css("text-align") == "center") { //x-axis 
     ele.css("top", ele.position().top - 20); //move them up over graph 
    } else { //y-axis 
     ele.css("left", ele.position().left + 20); //move them right over graph 
    } 
}); 

Tất nhiên vẫn có một số vấn đề này như các giá trị nhãn đánh dấu mức thấp nhất trên x- và trục y sẽ chồng chéo nhau và/giá trị nhãn đánh dấu cao nhất thấp nhất trên x- và trục y sẽ được đặt trên các cạnh của biểu đồ. Nhưng với một số tinh chỉnh này có thể là một giải pháp khả thi.

---

Ý tưởng thứ ba là sử dụng trực tiếp tickFormatter cho nhãn đánh dấu của trục x và trục y. Điều này làm việc tương tự như ý tưởng thứ hai nhưng sẽ đặt chúng trực tiếp nơi bạn muốn chúng không có "nhãn nhấp nháy" có thể đáng chú ý khi định vị lại có thể xảy ra với hàm trong ý tưởng thứ hai.

var plot = $.plot(placeholder, data, { 
    ... 
    xaxis: { 
     ..., 
     tickFormatter: function formatter(val, axis) { 
      //return appropriately absolute positioned element 
     } 
    }, 
    ... 
}); 

Làm thế nào tickFormatter chức năng này có thể trông giống như có nguồn gốc tốt nhất bằng cách nhìn vào jQuery Flot sourcecode đặc biệt là chức năng measureLabels (điều này giúp bạn một ý tưởng như thế nào Flot tự vị trí các nhãn đánh dấu) và định dạng đánh dấu mặc định trông giống như

function (v, axis) { 
    return v.toFixed(axis.tickDecimals); 
};