Javascript 基于y轴位置的Flot图标注

我正在尝试注释Flot.js图表；根据示例，这是通过添加一个绝对定位的div来完成的，该div漂浮在画布上，当您有一个具有固定宽度和静态内容的单一图表时，这是很好的。问题在于，这种方法在两种情况下都会失效：一种是在使用流体宽度布局（使用调整大小插件）时，另一种是在以不同大小（例如）动态重画图表对象时

---

对于我的问题，我需要在Y轴的某些部分绘制注释。我知道我可以通过使用标记添加一个垂直条来标记这些点，但这并不能真正帮助告诉我的程序在何处绘制注释标记。我怀疑这可能是在图表的绘图阶段添加自定义挂钩的问题，但我不完全确定；最好的方法是什么？

我找到了一种方法，特别是使用axis.p2c函数。下面是一个示例函数，它使用此逻辑绘制指向当前时间的插入符号：

window.TimePointer = function(plot, currentTime) {
    // Get the currente axes
    var axes = plot.getAxes();
    var xaxis = axes.xaxis;
    var yaxis = axes.yaxis;

    var element = plot.getPlaceholder();

    // Find the chart icon element
    var pointer = element.find('.time-pointer');

    // Check that the intended point is inside the visible area
    if((currentTime < xaxis.max) && (currentTime > xaxis.min)) {
        if(pointer.length == 0) {
            // If it doesn't exist already, create it
            element.append('<i class="time-pointer icon-caret-down"></i>');
            pointer = element.find('.time-pointer');
        }

        var plotOffset = plot.offset();
        var offset = {
            top: plotOffset.top - pointer.height(),
            left: xaxis.p2c(currentTime) + plotOffset.left - (pointer.outerWidth()/2)
        };
        pointer.offset(offset);
    } else {
        // If the currently selected area doesn't contain the point, erase the pointer
        pointer.remove();
    }
}

基于此，我还可以按照相同的逻辑在任何给定的时间点向图表添加基于时间的注释。请注意，最好将此函数绑定到图表的drawOverlay阶段，以便充分利用调整大小事件等功能

xaxis.p2c(time) + plotOffset.left - (pointer.outerwidth()/2)