Question

我正在尝试注释一个Flot.js图表;基于this示例，这是通过添加一个漂浮在画布上的绝对定位的div来完成的，当你有一个具有固定宽度和静态内容的单个图表时，这很好。问题是这种方法在两种情况下会破坏：一种是在使用流体宽度布局（使用Resize插件）时，另一种是在动态重绘不同大小的图表对象时，比如when implementing a zooming overview chart

对于我的具体问题，我需要在Y轴的某些部分绘制注释。我知道我可以通过使用标记添加一个垂直条来相当容易地标记这些点，但这并没有真正帮助告诉我的程序在注释标记中绘制的位置。我怀疑它可能是在图表的绘图阶段添加自定义钩子的问题，但我不完全确定;什么是最好的解决方法？

Answer 1

我找到了一种方法，特别是使用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();
    }
}

关键行是偏移计算

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

基于此，我还可以通过遵循相同的逻辑，在任何给定的时间点为我的图表添加基于时间的注释。请注意，将此函数绑定到图表的drawOverlay阶段可能是理想的，以便充分利用resize事件等内容。

基于y轴位置注释Flot图表

1 个答案: