[英]identifying hovered point with Flot?
希望这个问题不会太混乱或太长,我正在研究Flot示例,尤其是这个示例。
我正在使用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);
}
基本上,当我将鼠标悬停在某个点上时,我想渲染添加到d1
的点的url
的值,但是我无法这样做,因为item
对象不在item.datapoint
返回url
,仅返回x,y值的点数返回。 url
包含在item
但在item.data
中的item.data
下, item.data
中的所有其他点。
我的问题是,要么从item.data
列出的数组中唯一标识该点,要么迫使flot
将url
包含在item.datapoint
是否有办法将url
指向相应的点?
如果这样定义你的数据结构,那么你应该能够得到的URL与(例如你的plothover回调位置 ):
item.series.data[item.dataIndex][2].url
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.