2012-02-05 46 views
2

希望这个问题不是太混乱或长,我与Flot实例的工作,特别是this one.用Flot识别徘徊点?

我使用海军报绘制图形的一些数据我已经收集到散布图。我正在使用以下功能...

function genScatter(){ 
    var no = getSelectedRepeat(); 
    $.get("getPages.json",{rid: no},function(data){ 
     var d1 = []; 
     $.each(data,function(i,obj){ 
      d1.push([obj.queries,obj.count,{url: obj.url}]); 
     }) 
     $.plot($("#scatter"), [ { label: "Pages", 
      data: d1, 
      lines:{show: false}, 
      points:{show: true}}],{ 
      xaxis:{min: 1}, 
      grid:{ hoverable: true} 
     }); 
    }); 

} 

我的代码会生成一个包含各种点的散点图。当我将鼠标悬停在一个点以下监听被激活......

$("#scatter").bind("plothover", function (event, pos, item) { 
$("#x").text(pos.x.toFixed(2)); 
$("#y").text(pos.y.toFixed(2)); 
    if (item) { 
     if (previousPoint != item.dataIndex) { 
      previousPoint = item.dataIndex; 

      $("#tooltip").remove(); 
      var x = item.datapoint[0].toFixed(2), 
       y = item.datapoint[1].toFixed(2); 

      /*this would be the line where I extract 
      the url and forward it to showToolTip.*/ 
      showTooltip(item.pageX, item.pageY, 
         item.series.label + ": " + y); 
     } 
    } 
    else { 
     $("#tooltip").remove(); 
     previousPoint = null;    
    } 

}); 

其中showTooltip被定义为...

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); 
} 

基本上徘徊在一个点时,我想呈现值为url添加了点到d1,但我没有能够,因为item对象不返回urlitem.datapoint内只有点的x,y值返回。 url包含在item之内,但在item.data之下包含图中所有其他点。

我的问题是,无论是识别点唯一地从item.data列出的阵列或迫使flot包括url内部item.datapoint是有办法来获得url到的对应点?

回答

6

如果这样定义你的数据结构,那么你应该能够得到的URL在plothover回调函数(例如here):

item.series.data[item.dataIndex][2].url