jquery 图表高亮近点时的点

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 函数。

highlight(series, datapoint)

Highlight a specific datapoint in the data series. You can either specify the actual objects, e.g. if you got them from a "plotclick" event, or you can specify the indices, e.g. highlight(1, 3) to highlight the fourth point in the second series (remember, zero-based indexing).

unhighlight(series, datapoint) or unhighlight()

Remove the highlighting of the point, same parameters as highlight.

If you call unhighlight with no parameters, e.g. as plot.unhighlight(), all current highlights are removed.

参考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];

接下来我们开始有趣的部分，突出显示所有点！（只是我们真正想要突出显示的部分）

我在你的 "Find the nearest points, 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/，方便使用。

请注意，none 已优化。您最好重构代码以提供更通用的方法来解决此问题并提高可重用性和可读性。

Answer 2

像Michel de Nijs in his 一样使用highlight()函数，但更简单的版本：

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

2) 在 for (j ...) 循环之后添加 plot.highlight(i, j-1);。

查看此 fiddle 代码。

jquery 图表高亮近点时的点

jquery flot chart highlight dot when near point

javascript

jquery

flot