javascript - 获取多个Flot图表的十字线值

我在一个项目中使用了jQuery Flot Charts插件。我在同一列中有几张图表，我想做的是:如果将鼠标悬停在所有图表上，请在所有图表上显示十字准线。我正在使用以下代码成功完成此操作。

//graphs - this is an object which contains the references to all of my graphs.

$.each(graphs, function(key, value) {
    $(key).bind("plothover",  function (event, pos, item) {
        $.each(graphs, function(innerKey, innerValue) {
            if(key != innerKey) {
                innerValue.setCrosshair({x: pos.x});
            }
        });
        if(item) {
            var x = item.datapoint[0].toFixed(2),
                y = item.datapoint[1].toFixed(2);
            console.log("x:" + x + ", " + "y:" + y);
        }
    });
});

我正在遍历图形，添加十字准线并将其相互绑定(bind)。因此，现在，当您将鼠标悬停在一张图上时，十字准线在所有其他图上的位置相同。

没问题。但是我在代码的第二部分遇到问题:

if(item) {
    var x = item.datapoint[0].toFixed(2),
        y = item.datapoint[1].toFixed(2);
    console.log("x:" + x + ", " + "y:" + y);
}

问题是，仅当我将鼠标悬停在实际点上时，我才让console.log打印值，而当十字线越过该点时，我想获取该值，而不必是鼠标指针。有任何提示我做错了什么，或者在图形选项中有一个设置可以起作用吗？

另一件事是，我只能获取一个图形的值-鼠标处于打开状态，我似乎无法获取十字线也在移动的其余图形的值。

最佳答案

突出显示

if(item) {
    var x = item.datapoint[0].toFixed(2),
        y = item.datapoint[1].toFixed(2);
    console.log("x:" + x + ", " + "y:" + y);
}

仅在光标靠近某个点时有效(否则item为null)。

要获得最接近十字准线的点，您必须通过搜索最接近的点并进行插值(针对每个图形)来手动进行突出显示。该代码可能如下所示:

var axes = value.getAxes();
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
    pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
    return;
}
$('#output').html("x: " + pos.x.toPrecision(2));

$.each(graphs, function(innerKey, innerValue) {
    var i, series = innerValue.getData()[0];

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

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

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

    $('#output').html($('#output').html() + "<br />" + "y (" + innerValue.getData()[0].label + "): " + y.toPrecision(2));

有关完整的工作示例，请参见此fiddle。有关新代码和提琴的一些说明:

具有正弦和余弦值作为示例数据，因此使用浮点数，并相应地更改int数和/或日期值

使用<p>元素而不是控制台

进行输出
必要时可以进一步优化

的查找和内插代码(此处的基本版本取自Flot页面上的example)

仅在每个图形只有一个数据系列时才起作用

关于javascript - 获取多个Flot图表的十字线值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43144563/