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;