Javascript Flot:如何获取光标所在位置最近的打印点?

Javascript Flot:如何获取光标所在位置最近的打印点?,javascript,flot,Javascript,Flot,我正在尝试获取光标所指向的最近的打印点。我 我在jquery.flot.js源代码中找到了findNearbyItem函数,该函数似乎可以执行此操作,但当我尝试手动调用它时,收到了ReferenceError:findNearbyItem未定义错误 这就是我所指的功能: function findNearbyItem(mouseX, mouseY, seriesFilter) { var maxDistance = options.grid.mouseActiveRadius,

我正在尝试获取光标所指向的最近的打印点。我

我在
jquery.flot.js
源代码中找到了
findNearbyItem
函数,该函数似乎可以执行此操作,但当我尝试手动调用它时,收到了
ReferenceError:findNearbyItem未定义
错误

这就是我所指的功能:

function findNearbyItem(mouseX, mouseY, seriesFilter) {
    var maxDistance = options.grid.mouseActiveRadius,
        smallestDistance = maxDistance * maxDistance + 1,
        item = null, foundPoint = false, i, j, ps;

    for (i = series.length - 1; i >= 0; --i) {
        if (!seriesFilter(series[i]))
            continue;

        var s = series[i],
            axisx = s.xaxis,
            axisy = s.yaxis,
            points = s.datapoints.points,
            mx = axisx.c2p(mouseX), // precompute some stuff to make the loop faster
            my = axisy.c2p(mouseY),
            maxx = maxDistance / axisx.scale,
            maxy = maxDistance / axisy.scale;

        ps = s.datapoints.pointsize;
        // with inverse transforms, we can't use the maxx/maxy
        // optimization, sadly
        if (axisx.options.inverseTransform)
            maxx = Number.MAX_VALUE;
        if (axisy.options.inverseTransform)
            maxy = Number.MAX_VALUE;

        if (s.lines.show || s.points.show) {
            for (j = 0; j < points.length; j += ps) {
                var x = points[j], y = points[j + 1];
                if (x == null)
                    continue;

                // For points and lines, the cursor must be within a
                // certain distance to the data point
                if (x - mx > maxx || x - mx < -maxx ||
                    y - my > maxy || y - my < -maxy)
                    continue;

                // We have to calculate distances in pixels, not in
                // data units, because the scales of the axes may be different
                var dx = Math.abs(axisx.p2c(x) - mouseX),
                    dy = Math.abs(axisy.p2c(y) - mouseY),
                    dist = dx * dx + dy * dy; // we save the sqrt

                // use <= to ensure last point takes precedence
                // (last generally means on top of)
                if (dist < smallestDistance) {
                    smallestDistance = dist;
                    item = [i, j / ps];
                }
            }
        }

        if (s.bars.show && !item) { // no other point can be nearby
            var barLeft = s.bars.align == "left" ? 0 : -s.bars.barWidth/2,
                barRight = barLeft + s.bars.barWidth;

            for (j = 0; j < points.length; j += ps) {
                var x = points[j], y = points[j + 1], b = points[j + 2];
                if (x == null)
                    continue;

                // for a bar graph, the cursor must be inside the bar
                if (series[i].bars.horizontal ?
                    (mx <= Math.max(b, x) && mx >= Math.min(b, x) &&
                     my >= y + barLeft && my <= y + barRight) :
                    (mx >= x + barLeft && mx <= x + barRight &&
                     my >= Math.min(b, y) && my <= Math.max(b, y)))
                        item = [i, j / ps];
            }
        }
    }

    if (item) {
        i = item[0];
        j = item[1];
        ps = series[i].datapoints.pointsize;

        return { datapoint: series[i].datapoints.points.slice(j * ps, (j + 1) * ps),
                 dataIndex: j,
                 series: series[i],
                 seriesIndex: i };
    }

    return null;
}
函数findNearbyItem(mouseX、mouseY、seriesFilter){
var maxDistance=options.grid.mouseActiveRadius,
smallestDistance=maxDistance*maxDistance+1,
item=null,foundPoint=false,i,j,ps;
对于(i=series.length-1;i>=0;--i){
if(!系列过滤器(系列[i]))
继续;
var s=系列[i],
axisx=s.xaxis,
axisy=s.yaxis,
点=s.datapoints.points,
mx=axix.c2p(mouseX),//预计算一些东西以加快循环速度
my=axisy.c2p(mouseY),
maxx=maxDistance/axisx.scale,
maxy=maxDistance/axisy.scale;
ps=s.datapoints.pointsize;
//对于逆变换,我们不能使用maxx/maxy
//不幸的是,优化
if(axisx.options.inverseTransform)
maxx=Number.MAX_值;
if(axisy.options.inverseTransform)
maxy=Number.MAX_值;
如果(s.lines.show | | s.points.show){
对于(j=0;jmaxx | | x-mx<-maxx||
y-my>maxy | | y-my<-maxy)
继续;
//我们必须以像素为单位计算距离,而不是以像素为单位
//数据单位,因为轴的比例可能不同
var dx=Math.abs(axix.p2c(x)-mouseX),
dy=Math.abs(axisy.p2c(y)-mouseY),
dist=dx*dx+dy*dy;//保存sqrt

//use=y+barLeft&&my=x+barLeft&&mx=Math.min(b,y)&&my这是flot的一个内部函数,但您可以自己轻松地重新创建相同的功能。您所需要做的就是迭代数据系列中的点,并将它们的位置与鼠标指针进行比较(毕达哥拉斯应该能够在这里帮助您).

您的使用案例是什么?如果将
mouseActiveRadius
选项增加到某个较大的值,则会为您找到离光标最近的点

var options = {
    grid: { 
        hoverable: true, 
        mouseActiveRadius: 1000
    }
}
例如

编辑

可以,您可以使用
plothover
事件检索高亮显示的点

$("#placeholder").bind("plothover", function (event, pos, item) {
    if (item){
        var x = item.datapoint[0].toFixed(2),
            y = item.datapoint[1].toFixed(2);
        console.log("x:" + x + ", " + "y:" + y);
    }
});

更新了Fiddle。

至于您看到的原因:
参考错误:未定义findNearbyItem
请参见。
手动应用此小补丁将使函数公开。

如果其他人阅读此补丁并感到困惑,OP在问题中添加了一个标识符,谢谢。您还应该添加一些代码,向所有人显示您正在尝试执行的操作。您能详细说明执行比较的情况吗?代码中几乎都有您发布了。您可以使用
轴的
c2p
方法将画布坐标转换为绘图坐标,然后与每个数据点的X和Y值进行比较。鼠标和绘图点之间的距离可以简单地用毕达哥拉斯定理计算。这似乎是正确的路径,是否有任何w要检索光标找到的点的坐标吗?哎呀,忘了早些时候交赏金了。