フロート チャートのツール ヒントを表示しようとしています。バーの上にカーソルを置くと、ツール ヒントに対応する値が表示されます。私のグラフは画面全体の幅を占めています。左端にあるときは、トゥーチップが画面を超えており、値が表示されません。左端または右端にある場合の再配置方法。item.pageX と item.pageY の値を渡しています。私は混乱しています
#flot-tooltip {
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
position: absolute;
display: none;
border: 2px solid;
padding: 2px;
background-color: #FFF;
opacity: 0.8;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
function showTooltip(x, y, contents, z) {
$('<div id="flot-tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y - 30,
left: x - 110,
'border-color': z,
}).appendTo("body").show();
}
$("#flot-chart").bind("plothover", function(event, pos, item) {
if(item) {
if(previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$('#flot-tooltip').remove();
var x = item.datapoint[0].toFixed(2);
y = item.datapoint[1].toFixed(2);
z = item.series.color;
showTooltip(item.pageX, item.pageY, "<b>" + item.series.label + "</b><br /> <hr>" + y, z);
}
} else {
$('#flot-tooltip').remove();
previousPoint = null;
}
});