jquery – Flot chart – 如何在线悬停时触发事件

所以基本上我们希望在光标的位置满足它在图表上的一条线上的要求时有条件地显示工具提示.由于线不是我们可以使用的实体,因此需要计算光标两侧最近两点之间的直线,然后查看当前位置是否位于光标两侧.我简化了你的例子：

计算两点之间距离的函数：

function lineDistance( p1x,p1y,p2x,p2y ) {
    return Math.sqrt( (p2x - p1x)*(p2x - p1x) + (p2y-p1y)*(p2y-p1y) );
}

假设距离光标C最近的两个点是A和B,那么距离AB应该等于AC BC.

因此,要确定它是否在线：Math.abs(AB-(AC BC))< SomeThreshold.使用阈值实质上是在光标可以落入其中的行周围绘制一个框. 然后在plothover中扩展你的代码(jsFiddle)

$(placeholder).bind("plothover",function (event,pos,item) {
    if (item) {
        var tipText;

        if (opts.xaxis.mode === "time" || opts.xaxes[0].mode === "time") {
            tipText = stringFormat(to.content,item,timestampToDate);
        } else {
            tipText = stringFormat(to.content,item);
        }

        $tip.html(tipText).css({
            left: tipPosition.x + to.shifts.x,top: tipPosition.y + to.shifts.y
            }).show();
    } else {
         // Extended for line hover
         var series = plot.getData();
         var xBeforeIndex = 0;
         var xAfterIndex = -1;
         var Threshold = 0.0000025;
         var i = 1;
         while (i <= series[0].data.length && xAfterIndex==-1) {
             if (xAfterIndex == -1 && pos.x > series[0].data[i][0]) {
                 xBeforeIndex = i;
             } else if (xAfterIndex == -1) {
                 xAfterIndex = i;
             }
             i++;
         }

         var onTheLine = 
             lineDistance(
                series[0].data[xBeforeIndex][0]/10000,series[0].data[xBeforeIndex][1],pos.x/10000,pos.y)
             +lineDistance(pos.x/10000,pos.y,series[0].data[xAfterIndex][0]/10000,series[0].data[xAfterIndex][1])
             -lineDistance(
                series[0].data[xBeforeIndex][0]/10000,series[0].data[xAfterIndex][1]);

          if (Math.abs(onTheLine) < Threshold) {
              tipText = "Found Line";
              $tip.html(tipText).css({
                  left: tipPosition.x + to.shifts.x,top: tipPosition.y + to.shifts.y
                  }).show();
           } else {
               $tip.hide().html('');
           }
       }
  });

这里没有做的事情：

>更合适地检查边缘情况 – 上面假设第一个和最后一个点位于图形的边缘.
>在第二张图中添加回来
>使用像bubblesort这样的方法来查找前/后索引,从而提高数据集搜索性能.
>请注意,我正在缩小x轴10000.数字太大,前两个点之间的差距很大,使得y轴差异无关紧要(结果在这两个点之间始终为零).

请注意,添加第二个图表将要求您找到两个图形的最近点,并检查它是否落在任一行上.如果您的线条靠近或相交,您可以只设置一条优先线.如果你很难再添加第二行,我可以稍后帮忙.