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

Question

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

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

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

Answer 1

一种方法不是特别干净，如果您计划同时显示 x 轴和 y 轴刻度标签，尤其不会很好地工作，是将labelMargin选项设置grid为负值。

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

---

第二个想法可能是在绘制图表后获取所有div的 's 。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 轴上的最低/最高刻度标签值将位于图形的边缘. 但是通过一些微调，这可能是一个可行的解决方案。

---

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

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

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

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