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

然后运行更新方法。更新方法（取自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");
    }
}

我在想，为了实际与数据点交互，你必须改变源。

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

1 个答案: