有没有办法将x轴和y轴数字标签叠加到jQuery Flot图上.所以,我希望标签不在外面,在图形旁边,但是在图形本身之上.
以下示例在注释图形的顶部创建一个overlay div：
http://people.iola.dk/olau/flot/examples/annotating.html
有没有一个直接的方式来抓取文本和格局的轴从内部的烦恼和创建这样的覆盖从它？或者,还有另一种更好的方法是在图形顶部叠加轴标签吗？
解决方法
一种方法,不是特别干净,特别是不能很好地工作,如果你打算同时显示x轴和y轴刻度标签是将网格上的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轴上的最低/最高刻度标签值将位于图形的边缘.但是通过一些微调,这可能是一个可行的解决方案.
第三个想法是直接使用tickFormatter作为x轴和y轴的刻度标签.这与第二个想法相似,但是将它们直接放在你想要他们的地方,没有在第二个想法中可能出现的重新定位时可能会引起明显的“标签闪烁”.
var plot = $.plot(placeholder,{
...
xaxis: {
...,tickFormatter: function formatter(val,axis) {
//return appropriately absolute positioned element
}
},...
});
这个tickFormatter函数可以看起来像是通过查看jQuery Flot sourcecode,特别是函数measureLabels(这可以让你知道Flot本身如何定位tick标签)和默认的tick格式化器
function (v,axis) {
return v.toFixed(axis.tickDecimals);
};
