Question

http://jsfiddle.net/Margo/yKG7X/1/ 我正在使用工具提示功能，如小提琴。

    $("#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表示数据2 2/3表示数据3）当线条结束时' 彼此。但我不知道如何找到悬停点下是否有其他点。

正如在我的小提琴示例中，工具提示仅显示其中一个数据集的点，但两者都指向[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);
   }
});

更新了小提琴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>

当不同的图形线具有相同的点时，绘制图形工具提示

1 个答案: