使用Flot Javascript繪圖庫重疊數據線

Question

我必須繪製多行，並且想要在鼠標懸停時繪製數據點上的工具提示。然而，有些人可能會分享相同的（x，y）。這會導致重疊點。他們被繪製在彼此之上。

看起來「plothover」事件只返回最後繪製的頂部數據。因此，該工具提示僅適用於該點。我想在多個數據點懸停時繪製多個工具提示。

有沒有人遇到過這個問題？

謝謝！

Answer 1

是的，看着來源，flot只能找到plothover上最頂端的點。最簡單的方法就是自己完成工作。下面是爲plothover綁定一個通用搜索：

if (item) { 
     var content = item.series.label; 
     var someData = plot.getData(); 
     for (var i = 0; i < someData.length; i++){ 
      if (someData[i].label == item.series.label){ 
       continue; // skip item's series... 
      } 
      for (var j=0; j < someData[i].data.length; j++){ 
       if (someData[i].data[j][0] == item.datapoint[0] && 
        someData[i].data[j][1] == item.datapoint[1]){ 
         content += ' ' + someData[i].label; 
       } 
      }     
     } 
     showTooltip(item.pageX, item.pageY, content); 
    } 

小提琴例子here。

---

全碼：

$(function() { 
 

 
    var plot = $.plot($("#placeholder"),[ 
 
     { data: [[0,0],[1,1],[2,2]], label: "Line One"}, 
 
     { data: [[0,2],[1,1],[2,0]], label: "Line Two"}, 
 
     { data: [[0,0],[0.5,1],[1,1],[2,3]], label: "Line Three"} 
 
    ], { 
 
     series: { 
 
      lines: { show: true }, 
 
      points: { show: true } 
 
     }, 
 
     grid: { hoverable: true, clickable: true } 
 
    }); 
 

 
    function showTooltip(x, y, contents) { 
 
     $('#tooltip').html(contents); 
 
     $('#tooltip').css({ 
 
      top: y + 5, 
 
      left: x + 5, 
 
      display: 'block'}); 
 
    } 
 

 
    $("#placeholder").bind("plothover", function (event, pos, item) { 
 
     if (item) { 
 
      var content = item.series.label; 
 
      var someData = plot.getData(); 
 
      for (var i = 0; i < someData.length; i++){ 
 
       if (someData[i].label == item.series.label){ 
 
        continue; 
 
       } 
 
       for (var j=0; j < someData[i].data.length; j++){ 
 
        if (someData[i].data[j][0] == item.datapoint[0] && 
 
         someData[i].data[j][1] == item.datapoint[1]){ 
 
          content += ' ' + someData[i].label; 
 
        } 
 
       }     
 
      } 
 
      
 
      
 
      
 
      showTooltip(item.pageX, item.pageY, content); 
 
     } 
 
     else 
 
     { 
 
      $("#tooltip").css('display','none');  
 
     } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://www.flotcharts.org/javascript/jquery.flot.min.js"></script> 
 
<br/><br/> 
 
<div id="placeholder" style="width:400px;height:300px;"></div> 
 
<div id="tooltip" style="position: absolute; 
 
      display: none;    
 
      border: 1px solid #fdd; 
 
      padding: 2px; 
 
      background-color: #fee; 
 
      opacity: 0.80"></div>