tooltip - 不同图形线具有相同点时的浮点图工具提示

Question

http://jsfiddle.net/Margo/yKG7X/1/我正在使用工具提示功能，就像 fiddle 一样。

    $("#placeholder").bind("plothover", function (event, pos, item) {
 if (item) {  
                $("#tooltip").remove();

                    var x = item.datapoint[0],
                        y = item.datapoint[1];
                    showTooltip(item.pageX, item.pageY, x + " / " + y + " for " + item.series.label);
                    }
    });

我正在向图表中添加几条图形线，并且我想扩展该函数以在线条结束时显示所有线条的所有点(应该这样说:2/3 for data2 2/3 for data3) ' 彼此。但我不知道如何查找悬停点下方是否还有其他点。

如我的 fiddle 示例所示，工具提示仅显示其中一个数据集的点，但两个数据集的点均位于 [0, 1]、[1, 2]、[2, 3]

感谢您的帮助!

Answer 1

不幸的是，我不知道有什么“好的”方法可以解决这种情况。一个简单的解决方法是自己搜索这些点:

$("#placeholder").bind("plothover", function (event, pos, item) {
  if (item) {  
     $("#tooltip").remove();
     var hoverSeries = item.series; // what series am I hovering?
     var x = item.datapoint[0],
         y = item.datapoint[1];
     var strTip = x + " / " + y + " for " + item.series.label; // start string with current hover

     var allSeries = plot.getData();
     $.each(allSeries, function(i,s){ // loop all series
         if (s == hoverSeries) return; // if the loop series is my hover, just keep going
         $.each(s.data, function(j,p){
             if (p[0] == x){  // if my hover x == point x add to string
                 strTip += "</br>" + p[0] + " / " + p[1] + " for " + s.label;
             }
         });             
     });
     showTooltip(item.pageX, item.pageY, strTip);
   }
}); 

更新了 fiddle here .

<小时/>

运行代码:

var plot;
$(function() {
     //Add tooltip
  $("#placeholder").bind("plothover", function (event, pos, item) {
     if (item) {  
         $("#tooltip").remove();
         var hoverSeries = item.series;
         var x = item.datapoint[0],
             y = item.datapoint[1];
         var strTip = x + " / " + y + " for " + item.series.label;
         
         var allSeries = plot.getData();
         $.each(allSeries, function(i,s){
             if (s == hoverSeries) return;   
             $.each(s.data, function(j,p){
                 if (p[0] == x){
                     strTip += "</br>" + p[0] + " / " + p[1] + " for " + s.label;
                 }
             });             
         });
         showTooltip(item.pageX, item.pageY, strTip);
      }
    }); 
    
    var d3 = [[0, 1], [1, 2], [2, 3],[3, 4]];
    var d2 = [[-1, 0],[0, 1], [1, 2], [2, 3]];
    
    var data = [
    {
        label: 'data2',
        color:1,
        data: d2
    },
    {   
        label: 'data3',    
        color:2,
        data: d3
    }];
            
    var conf = {
        lines: { show: true },
        points: { show: true },
        grid: { hoverable: true, clickable: true },
    };
    
    plot = $.plot($('#placeholder'), data, conf);
    
    }); 
    
function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y + 5,
        left: x + 5,
        border: '1px solid #fdd',
        padding: '2px',
        'background-color': '#fee',
        opacity: 0.80
    }).appendTo("body").fadeIn(200).fadeOut(6000);
}

.graph-placeholder {
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.2em;
    padding: 0; 
    position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<div id ="ResizableContainer" class="ui-widget-content" style="width:300px;height:150px;">
    <div id="placeholder" class="graph-placeholder"></div> 
</div>