Question

有人可以向我解释一下这段代码：

$("#lineChart").bind("plothover", function (event, pos, item) {
    if (item) {
        var x = item.datapoint[0].toFixed(2),
             y = item.datapoint[1].toFixed(2);
        $("#tooltip").html(x + ', ' + y)
           .css({top: item.pageY, left: item.pageX})
           .fadeIn(200);
    } else {
        $("#tooltip").hide();
    }

因此，我可以通过复制粘贴此代码并修改#tooltip元素的附带css来为我的flot-chart创建工具提示。但是我似乎无法理解代码的这一部分具体是var项目，pos是什么以及top：item.pageY有什么作用？

Answer 1

这是您回调评论很多的版本：

// you are binding the plot hover event to your graph placeholder div
// the event will fire anytime the mouse is moved within that div
// and you callback function will be called
$("#lineChart").bind("plothover", function (event, pos, item) {
    // if the mouse is over a point
    // the callback function will get an item (the point)
    // if the mouse is not over a point it will be null
    if (item) {
        // x, y are the graph coordinates in your x/y axis units
        var x = item.datapoint[0].toFixed(2),
            y = item.datapoint[1].toFixed(2);
        // pageY, pageX are the screen coordinates in pixels
        // this will set the tooltip div's html
        // then set the position of the div on the screen
        // then show it
        $("#tooltip").html(x + ', ' + y)
           .css({top: item.pageY, left: item.pageX})
           .fadeIn(200);
    } else {
        // if you aren't over a point
        // item is null, so hide the tooltip
        $("#tooltip").hide();
    }
}

Answer 2

x和y变量是基于＆＃39;项目的数字。传递给函数的变量。这些数据点将通过.html事件传递到工具提示。我不知道＆＃39; pos＆＃39;是 - 即使它传递给函数，在你的代码中它似乎没有被使用。一个疯狂的猜测是它与＆＃34;位置＆＃34;有关。某事，你还没有给我们这个功能的完整代码。＆＃34;顶部＆＃34;并且＆＃34;离开＆＃34;将.html定位于工具提示。

邮件图表中的工具提示

2 个答案: