[英]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.