用 Flot 识别悬停点？答案

【问题标题】：identifying hovered point with Flot?用 Flot 识别悬停点？
【发布时间】：2012-02-05 16:41:48
【问题描述】：

希望这个问题不会太混乱或太长，我正在使用 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 对象不返回 @987654330 @ inside item.datapoint 仅返回点的 x,y 值。 url 包含在 item 内，但在 item.data 下，与图中的所有其他点组成一个数组。

我的问题是，要么从item.data 中列出的数组中唯一识别点，要么强制flot 将url 包含在item.datapoint 中，有没有办法让url 到相应的点？

【问题讨论】：

标签： javascript jquery charts flot

【解决方案1】：

如果你像这样定义你的数据结构，那么你应该能够在你的 plothover 回调中获取 url（例如 here）：

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

【讨论】：