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;