Flot圖表 - 如何觸發線上懸停的事件

Question

我已經爲jQuery Flot圖表編寫了一個插件，它允許您通過單擊圖表的一行來動態添加數據點，通過右鍵單擊將其刪除，還允許拖動這些點在畫布周圍。

這工作正常，我也有一個工具提示顯示Y值，當你懸停或拖動一個點周圍。

我想要做的是當用戶將鼠標懸停在顯示消息「左鍵單擊以添加數據點」的行上時，顯示第二個工具提示。

我似乎無法找到一種方法將懸停事件添加到行本身，並且看起來不是本機方法。

有誰知道我會怎麼去實現這個目標？

謝謝。

編輯：這裏是包括我使用的工具提示創建代碼的jsfiddle：

jsFiddle

，你可以看到一個提示呈現，當你將鼠標懸停在一個實際的數據點，但是我想當你將鼠標懸停在數據點之間的線上時，找到一種方法來激發單獨的工具提示。注：這個小提琴不包括我的自定義代碼來動態地添加和拖動數據點，因爲對於這個問題來說代碼太多了。

Answer 1

所以基本上我們希望當光標的位置符合要求時，它在條形圖上顯示一條工具提示。由於線不是實體，我們可以與您一起工作，需要計算光標任意一側最近兩點之間的線，然後查看您的當前位置是否在其上。我你的簡化例子的位：

功能的兩個點之間計算距離：

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

假設你最近的兩個點是A和B，以光標C，則距離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[xBeforeIndex][1], 
       series[0].data[xAfterIndex][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(''); 
      } 
     } 
    }); 

事情並不在這裏完成：

1. 更恰當地檢查你的邊緣情形 - 上述假設第一和最後一個點上圖的邊緣。
2. 在你的第二個圖中加回
3. 使用像bubblesort這樣的方法改進數據集的搜索性能以找到前/後索引。
4. 請注意，我將x軸縮小了10000.這些數字太大，前兩點之間的很大差距使得y軸差異不顯着（結果在這兩點之間始終爲零）。

請注意，添加第二個圖需要您爲兩個圖找到最近的點並檢查它是否落在任一行上。如果您的線路靠近或相交，您可以將其作爲優先線。如果你努力加入第二行，我可以在以後幫助。