0
我使用Flot的plothover方法在鼠标在网格内移动时创建某些操作。它似乎工作正常，并突出显示我的数据点。我创建了一个跟随鼠标光标的垂直条形对象，我只希望它在鼠标悬停在网格上时可见。只需将verticalBar的css设置为visibility: "hidden"或display: "none"似乎不起作用（注意：我只想看到垂直条，但仅当鼠标位于网格上时）。我相信这个问题与我使用plothover有关，但我不确定它为什么不以处理工具提示和高亮的方式处理verticalBar。Plothover不适用于对象
placeholder = $(element);
plot = $.plot(placeholder, data, {
grid: {
clickable: true,
hoverable: true,
color: "white",
mouseActiveRadius: 100
},
tooltip: {
show: true,
content: '%y'
},
series: {
lines: {
show: true
},
points: {
show: true,
radius: 2.0
},
autoHighlight: true,
highlightColor: "#37FDFC"
},
colors: (function() {
var i, len, ref, results;
results = [];
for (i = 0, len = data.length; i < len; i++) {
l = data[i];
results.push(((ref = l.lines) != null ? ref.fillColor : void 0) === "#C90E30" ? "#A80C28" : "#357A27");
}
return results;
})(),
xaxis: {
show: false
},
yaxis: {
min: params.min(),
max: params.max(),
font: {
size: 10,
lineHeight: 12,
color: "#000000"
},
ticks: 4,
minTickSize: 50,
tickFormatter: function(val, axis) {
return (val.toFixed(axis.tickDecimals)) + "m";
},
tickDecimals: 0
}
});
placeholder.on("plothover", function(event, position, item) {
var horizontalBounds, leftOffset, pixelCoords, topOffset;
if (pointsOnly.length >= position.x) {
pixelCoords = plot.pointOffset({
x: position.x,
y: pointsOnly[parseInt(position.x)][2]
});
console.log(pointsOnly[parseInt(position.x)][0]);
if (pointsOnly[parseInt(position.x)][0] === "#439C32") {
vis = "The target is Visible";
visLegend.text(vis);
} else if (pointsOnly[parseInt(position.x)][0] === "#C90E30") {
vis = "The target is Not Visible";
visLegend.text(vis);
}
}
leftOffset = plot.getPlotOffset().left;
topOffset = plot.getPlotOffset().top;
horizontalBounds = [leftOffset, plot.width() + leftOffset];
if (position.pageX >= horizontalBounds[0] && position.pageX <= horizontalBounds[1]) {
if (typeof verticalBar !== "undefined" && verticalBar !== null) {
verticalBar.css({
transform: "translate(" + position.pageX + "px, 0px)"
});
}
}
if (position.pageX >= horizontalBounds[0] && position.pageX <= horizontalBounds[1]) {
return typeof visLegend !== "undefined" && visLegend !== null ? visLegend.css({
transform: "translate(" + position.pageX + "px, 0px)"
}) : void 0;
}
});
verticalBar = placeholder.append("<div></div>").children().eq(-1);
verticalBar.css({
backgroundColor: "#F7E4E6",
width: "1px",
height: "100%",
position: "absolute",
padding: 0,
margin: 0,
left: 0,
display: "none",
transform: "translateX(" + plot.getPlotOffset().left + "px)"
});
visLegend = placeholder.append("<div></div>").children().eq(-1);
visLegend.css({
border: "1px solid #FF0000",
backgroundColor: "#ff66cc",
fontWeight: "bold",
fontSize: "7",
color: "#ffffff",
position: "absolute",
padding: "1px",
margin: 0,
top: -30,
opacity: 0.5,
left: 0,
transform: "translateX(" + plot.getPlotOffset().left + "px)"
});
return console.log(plot.getData());
};
})(this)
};
});
return null;