Javascript 如何在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>

$（函数（）{
var数据=[[1251756000000122.68]、[1251842400000122.68]、[1251928800000125.13]、[1252015200000112.62]、[125210160000122.76]]
$.plot（$（“#图形_占位符”），[数据]，{
xaxis:{mode:“time”，minTickSize:[1，“day”]，timeformat:“%y/%m/%d”，}，
行：{show:true}，
要点：{show:false}，
} );
});

因此，最好是在悬停点（x:1251756000000，y:any）时获得

x:1251756000000 y:122.68

。甚至将

x

值格式化为

时间格式（2009/11/14）中定义的格式
 显示如何启用工具提示（如果单击“启用工具提示”复选框）。下面是使用示例代码的起点：

<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>


$（函数（）{
var数据=[[1251756000000122.68]、[1251842400000122.68]、[1251928800000125.13]、[1252015200000112.62]、[125210160000122.76]]
$.plot（$（“#图形_占位符”），[数据]{
xaxis:{mode:“time”，minTickSize:[1，“day”]，timeformat:“%y/%m/%d”，}，
行：{show:true}，
要点：{show:true}，
网格：{hoverable:true}，
} );
});
var-previousPoint=null；
$（“#图形_占位符”）.bind（“plothover”，函数（事件、位置、项目）{
如果（项目）{
if（上一个点！=item.datapoint）{
previousPoint=item.datapoint；
$（“#工具提示”）.remove（）；
showTooltip（item.pageX，item.pageY'（“+item.datapoint[0]+”，“+item.datapoint[1]+”）；
}
}否则{
$（“#工具提示”）.remove（）；
previousPoint=null；
}
});
函数显示工具提示（x、y、内容）{
$（''+内容+''）.css（{
位置：'绝对'，
显示：“无”，
顶部：y+5，
左：x+5，
边框：“1px实心#fdd”，
填充：“2px”，
“背景色”：“费用”，
不透明度：0.80
}).appendTo（“body”）.fadeIn（200）；
}