图顶部的 jQuery Flot 数据/轴标签

Question

有没有办法将 x 轴和 y 轴数字标签叠加到 jQuery Flot 图上。所以，我希望标签不在图表旁边，而是在图表本身的顶部。

以下示例在图表顶部为注释创建一个覆盖 div： http://people.iola.dk/olau/flot/examples/annotating.html

是否有一种直接的方法可以从 flot 中获取轴的文本和格式并从中创建这样的叠加层？或者，是否有另一种更好的方式将轴标签覆盖在图表顶部？

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 轴上的最低/最高刻度标签值将位于边缘图的。但是通过一些微调，这可能是一个可行的解决方案。

---

第三个想法是直接使用tickFormatter 作为 x 轴和 y 轴的刻度标签。这与第二个想法类似，但会将它们直接放置在您希望它们所在的位置，而不会在重新定位时出现明显的“标签闪烁”，这可能与第二个想法中的函数一起出现。

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

这个tickFormatter 函数的外观最好通过查看jQuery Flot sourcecode 特别是measureLabels 函数（这让您了解Flot 本身如何定位刻度标签）和默认刻度格式化程序得到最好的导出，看起来像

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