2

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

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

4

1 回答 1

3

我找到了一种方法，特别是使用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 事件等功能。

于 2013-07-08T18:04:19.913 回答