jquery - 在假想的垂直线上 float 工具提示

Question

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

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

我找到了这个解决方案 - 但它看起来像是一个黑客(并且不起作用): Flot mousehover algorithm to detect purely based on x location?

除了破解源代码之外，还有什么更好的方法可以做到这一点吗？

这是我正在谈论的一个示例(它是大图表，但是这个 是我想要的功能)。您可以将鼠标悬停在该线上或将鼠标悬停在 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;source=undefined

Answer 1

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

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

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

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");
    }
}

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