Question

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

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

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

Answer 1

如果您计划同时显示x轴和y轴刻度标签，那么一种不是特别干净且特别不能正常工作的方法是在labelMargin上设置grid选项{1}}为负值。

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 Flot sourcecode，特别是函数measureLabels得到的（这可以让你了解Flot本身如何定位刻度标签）和默认刻度格式化程序，看起来像

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

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

1 个答案: