Question

我在我的一个项目中使用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);
        }
    });
});

我正在迭代图表，添加十字准线并将它们相互绑定。所以，现在，当您将鼠标悬停在其中一个图表上时，您会在所有其他图表上看到相同位置的十字准线。

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

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

问题在于，只有当我用鼠标悬停实际点时，我才会获得console.log打印值，而我想在十字准线穿过该点时获取该值，而不一定是鼠标指针。有什么线索我做错了或者图表选项中有设置可以使用吗？

另一件事是我只能获得一个图形的值 - 我的鼠标所在的图形，我似乎无法获得十字准线也在移动的其余图形的值。

Answer 1

用

突出显示

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

仅在光标靠近某点时有效（否则item为空）。

要获得最接近十字准线的点，您必须通过搜索最近的点并进行插值（对于每个图形）手动进行高亮显示。代码可能如下所示：

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）
仅在每个图表只有一个数据系列时才有效

在多个Flot Charts中获取十字准线值

1 个答案: