上图的顶部的jQuery FLOT数据/轴标签

Question

是否有叠加在x轴和y轴数字标签到一个jQuery FLOT图表的方法。所以，我想的标签不被外界，旁边的图形，但图形本身。顶部

以下示例创建图表上的注释之上的覆盖DIV： http://people.iola.dk/olau/flot/examples/annotating。 HTML

是否有来自海军报内抓住轴的文本和格式和创建这样的覆盖在它外面的一个简单的方法是什么？或者，有可能在图的顶部覆盖轴标签的另一种更好的方法？

Answer 1

的一种方式，这是不特别干净，如果打算在同一时间，以显示X轴和Y轴刻度标签尤其不会很好地工作，是对所述labelMargin grid选项设置为负值

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

---

一个第二想法可以抓住该图已被涂漆之后已经div所有class="tickLabel"的。然后在“手动”改变其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, data, {
    ...
    xaxis: {
        ...,
        tickFormatter: function formatter(val, axis) {
           //return appropriately absolute positioned element
        }
    },
    ...
});

这怎么tickFormatter功能可能看起来像通过查看 jQuery的海军报最好衍生源代码尤其是功能measureLabels（这可以让你的想法海军报本身如何定位刻度标记），默认打勾格式化它看起来像

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