jQuery在圖形頂部繪製數據/軸標籤

Question

是否有方法將x軸和y軸數值標籤疊加到jQuery Flot圖形上。所以，我希望標籤不要在圖的旁邊，而是在圖的頂部。

下面的示例創建圖表上的註釋之上的覆蓋DIV： http://people.iola.dk/olau/flot/examples/annotating.html

是否有來自海軍報內抓住軸的文本和格式和創建這樣的覆蓋出的一個簡單的方法它？或者，是否有另一種更好的方式將軸標籤疊加在圖形頂部？

Answer 1

如果您打算同時顯示x軸和y軸刻度標籤，一種方法不是特別乾淨，尤其是不能很好地工作，那就是將grid上的labelMargin選項設置爲負值值。

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

---

第二個想法可能是搶具有class="tickLabel"圖已經繪畢竟div的。然後「手動」改變它們的CSS定位。

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

當然，這仍然有一些問題爲對x軸和y軸的最低刻度標記值會彼此重疊，並且最低/最高刻度標籤上的x軸和y軸的值將是位於圖形的邊緣。但通過一些微調，這可能是一個可行的解決方案。

---

第三想法是直接使用的x軸和y軸的刻度標記標籤一個tickFormatter。這與第二個想法類似，但會將它們直接放置在您希望它們的位置，而不會在重定位時引起注意力的「標籤閃爍」，這可能與第二個想法中的功能發生有關。

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

這怎麼tickFormatter功能可能看起來像通過查看jQuery Flot sourcecode最好衍生尤其是功能measureLabels（這可以讓你的想法海軍報本身如何定位刻度標記），默認打勾格式，它看起來像

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