jQuery Flot数据/轴标签在图表顶部

Question

有没有一种方法可以将jQuery Flot图形的x轴和y轴数值标签叠加在一起。所以，我希望标签不是在图形旁边的外部，而是在图形本身上面。

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

是否有一种简单的方法来从flot中抓取轴的文本和格式，并创建这样的叠加层？或者，也许有另一种更好的方式将轴标签叠加在图形上面？

- Candidasa

---

我的回答没有令您满意/没起作用吗？请提供反馈。 - jitter

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
        }
    },
    ...
});

看看jQuery Flot源代码中的measureLabels函数，可以更好地确定tickFormatter函数的外观（这让您了解Flot本身如何定位刻度标签）以及默认的刻度格式化程序如下：

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

- jitter