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

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

第三个想法是直接使用a tickFormatter作为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);
};