Question

我正在使用jQuery flot（plot）

创建一个图表

var updateLegendTimeout = null;
var latestPosition = null;

function updateLegend() {

    updateLegendTimeout = null;

    var pos = latestPosition;

    var axes = plot.getAxes();
    if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max || pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
        return;
    }

    /*
            var o = plot.pointOffset({ x: pos.x, y: -1.25 });
            var ctx = plot.getCanvas().getContext("2d");

            ctx.beginPath();
            ctx.moveTo(o.left, o.top);
            o.top = 0;
            ctx.lineTo(o.left, o.top);
            ctx.stroke();
            */

    var i, j, dataset = plot.getData();
    var halfDist = (dataset[0].data[1][0] - dataset[0].data[0][0]) / 2;

    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] - halfDist > 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];

        legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
        //dataset[i].highlightColor = "#abcdef";
        //plot.highlight(dataset[0].series, dataset[0].datapoint);
    }
}

$("#placeholder").bind("plothover", function (event, pos, item) {
    latestPosition = pos;
    if (!updateLegendTimeout) {
        updateLegendTimeout = setTimeout(updateLegend, 50);
    }
});

我想添加一项功能，当用户沿着x轴移动鼠标时，点会突出显示，指示它们最靠近的位置。我已经有了反映价值观的传奇，但我如何突出这些点？

编辑：非常有帮助的答案！如果有人有兴趣，这是完成的结果 https://jsfiddle.net/5gtqwkjg/4/

Answer 1

您可以使用Flot提供的highlight和unhighlight功能。

突出显示（系列，数据点）

突出显示数据系列中的特定数据点。你也可以   指定实际对象，例如如果你从“plotclick”获得它们   事件，或者您可以指定索引，例如突出显示（1,3）   突出第二个系列中的第四点（记住，从零开始   索引）。

取消高亮（系列，数据点）或取消高亮（）

删除点的突出显示，与高亮显示的参数相同。

如果您在没有参数的情况下调用unhighlight，例如如   plot.unhighlight（），删除所有当前的高光。

请参阅https://github.com/flot/flot/blob/master/API.md#plot-methods以供参考。

将这个逻辑应用到您的问题中，我思考我设法创建了您想要的结果。

我首先开始时不要强调所有内容，只是为了确保在执行突出显示点时没有任何事情滑过我们。

for (i = 0; i < dataset.length; ++i) {

        plot.unhighlight(); // Unhighlight everything!

        var series = dataset[i];

接下来我们去做有趣的部分，突出显示所有积分！（只是我们想要突出显示的那些）

在你的“找到最接近的点，x-wise”循环中，我添加了另一个循环！

for (j = 0; j < series.data.length; ++j) {    
    if (series.data[j][0] - halfDist > pos.x) { 
        for(a = 0; a < dataset.length; a++) {  // <-- The added loop

            // You might want to optimize the way this is done
            // The way you were storing the series data didn't seem to work like I..
            // ..wanted it do, so I had to iterate the dataset variable again.
            // The yellow line won't highlight if you change dataset[a] to series. 
            plot.highlight(dataset[a], series.data[j][0]);
        }

        break;
     }
 }

结果https://jsfiddle.net/qj3068zn/6/，以方便使用。

请注意，这些都不是优化的。您可能最好重新构建代码，以提供更通用的方法来解决此问题并提高可重用性和可读性。

Answer 2

在Michel de Nijs中使用highlight()等plot.unhighlight();函数，但更简单的版本：

1）将updateLegend放在plot.highlight(i, j-1);函数的开头（您可能还想重命名，因为它不再仅仅更新图例）。

2）在for (j ...)循环后添加{{1}}。

请参阅此answer代码。

jquery flot chart近点时突出显示点

2 个答案: