如何在Flot圖中顯示帶有數據點數據的彈出窗口？

Question

我得到了Flot創建的圖。我想要做的是在用戶將鼠標移動到其上時獲取某種信息 - 最好是在某種JavaScript彈出窗口中顯示數據（從x和y軸）。

這也可能是微不足道的問題，但我不出來...

現在我的JavaScript看起來像這樣：

<script id="source" language="javascript" type="text/javascript"> 
$(function() { 
    var data = [[1251756000000, 122.68],[1251842400000, 122.68],[1251928800000, 125.13],[1252015200000, 112.62],[1252101600000, 122.76]] 
    $.plot($("#graph_placeholder"), [ data ], { 
     xaxis: { mode: "time", minTickSize: [1, "day"], timeformat : "%y/%m/%d", }, 
     lines: { show: true }, 
     points: { show: false }, 
    }); 
}); 
</script> 

所以最好將獲得x: 1251756000000 y: 122.68徘徊時，點（x：1251756000000，y：任何）。或者甚至有x的值按照timeformat（2009/11/14）中的定義格式化。

Answer 1

This example顯示如何啓用工具提示（如果您單擊啓用工具提示覆選框）。以下是使用示例代碼的起點：

<script id="source" language="javascript" type="text/javascript"> 
$(function() { 
var data = [[1251756000000, 122.68],[1251842400000, 122.68],[1251928800000, 125.13],[1252015200000, 112.62],[1252101600000, 122.76]] 
$.plot($("#graph_placeholder"), [ data ], { 
    xaxis: { mode: "time", minTickSize: [1, "day"], timeformat : "%y/%m/%d", }, 
    lines: { show: true }, 
    points: { show: true }, 
    grid: { hoverable: true }, 
}); 
}); 

var previousPoint = null; 
$("#graph_placeholder").bind("plothover", function (event, pos, item) { 
if (item) { 
    if (previousPoint != item.datapoint) { 
     previousPoint = item.datapoint; 
     $("#tooltip").remove(); 
     showTooltip(item.pageX, item.pageY, '(' + item.datapoint[0] + ', ' + item.datapoint[1]+')'); 
    } 
} else { 
    $("#tooltip").remove(); 
    previousPoint = null; 
} 
}); 

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