2012-02-05 79 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