在假想的垂直线上浮动工具提示

Question

如何添加工具提示的功能，以便在 鼠标“悬停”在该点上或该点上方/下方的假想垂直线上的任何像素？

我的图表上只有 1 条线。我 希望这样当鼠标移动时可以显示数据点的工具提示 越过穿过该点的“看不见的”垂直线 - 不强制 用户明确将鼠标悬停在该点上。

我找到了这个解决方案 - 但它看起来像是一个黑客（并且不起作用）： Flot mousehover算法纯粹基于x位置进行检测？< /a>

有没有更好的方法来做到这一点而不是破解源代码？

这是我正在谈论的一个例子（它的大图表，但是这个 是我想要的功能）。您可以将鼠标悬停在该线上或将鼠标悬停在 X 轴上的任意点以显示该 X 轴上的点 像素： http://finance.yahoo.com/echarts?s=^DJI+Interactive#chart1:symbol=^dji;range=1d;indicator=volume;charttype=line ;crosshair=on;ohlcvalues=0;logscale =on;来源=未定义

Answer 1

我能够在这个 fiddle 中执行类似于雅虎图表的操作。我只是在鼠标悬停时更新 x 位置：

$("#placeholder").bind("plothover", function (event, pos, item) {
    latestPosition = pos;
    if (!updateTooltipTimeout) {
        updateTooltipTimeout = setTimeout(update, 30);
    }
});

然后运行更新方法。 update 方法（取自 flot crosshairs 示例）对 y 数据点进行插值最接近 x，然后在线上显示工具提示和点：

function update() {
    updateTooltipTimeout = null;
    var pos = latestPosition;

    var i, j, dataset = plot.getData();
    for (i = 0; i < dataset.length; ++i) {
        var series = dataset[i];

        // Find the nearest points, x-wise
        for (j = 0; j < series.data.length; ++j) {
            if (series.data[j][0] > pos.x) {
                break;
            }
        }

        // Now Interpolate
        var y,
        p1 = series.data[j - 1],
            p2 = series.data[j];

        if (p1 == null) {
            y = p2[1];
        } else if (p2 == null) {
            y = p1[1];
        } else {
            y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
        }

        var o = plot.pointOffset({
            x: pos.x,
            y: y
        });

        updateTooltip(o.left, o.top,
            "x: " + pos.x.toFixed(2) + " y: " + y.toFixed(2));

        plotPoint(o.left, o.top, 5, "rgb(153,180,125)", "circle");
    }
}

我认为为了实际与数据点交互，您必须更改源。