用Flot确定悬停点？

Question

Hopefully this questions isn't too confusing or long, I'm working with the Flot examples, specifically this one.

I'm using flot to graph some data I've been gathering into a Scatter chart. I'm using the following function to do so...

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

}

My code generates a Scatter chart with various points. When I hover over a point the following listener gets activated...

$("#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;            
    }

});

where showTooltip is defined is...

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

Basically, when hovering over a point I'd like to render the value for url added with the point to d1 but I haven't been able to because the item object doesn't return url inside item.datapoint only the x,y value of the points are returned. url is included inside item but under item.data in an array with all of the other points in the graph.

My question is, either identifying the point uniquely from the array listed in item.data or forcing flot to include url inside item.datapoint is there a way to get the url to a corresponding point?

Answer 1

如果这样定义你的数据结构，那么你应该能够得到的URL与（例如你的plothover回调位置 ）：

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