Javascript Flot-plothover在屏幕右侧不起作用?
在某些情况下,plothover似乎无法在屏幕的右侧或中间工作。如果我在placemarker周围放置一个宽度为100%的div,它可以正常工作。如果我在其周围放置一个75%宽度的div,flot图的右侧不会显示任何工具提示或悬停。我正在使用jQuery1.11.1、jQueryUI1.10.4和FLOT0.8.3。看看我的代码,告诉我你的想法。我被难住了Javascript Flot-plothover在屏幕右侧不起作用?,javascript,jquery,html,flot,Javascript,Jquery,Html,Flot,在某些情况下,plothover似乎无法在屏幕的右侧或中间工作。如果我在placemarker周围放置一个宽度为100%的div,它可以正常工作。如果我在其周围放置一个75%宽度的div,flot图的右侧不会显示任何工具提示或悬停。我正在使用jQuery1.11.1、jQueryUI1.10.4和FLOT0.8.3。看看我的代码,告诉我你的想法。我被难住了 <div id="thing" style="width: 100%"> <div id="aReport" wi
<div id="thing" style="width: 100%">
<div id="aReport" width="75%">
<div class="report-header">
<h1>Recovery Profile: </h1>
<h1>
blah blah
</h1>
<div class="report-nav">
<a href="#" class="help-btn">
<img src="resources/images/report-nav-help.png" alt="Help" />
</a>
<div id="roll-help"></div>
</div>
</div>
<div id="report-content">
<h1>Overview</h1>
<div id="spinnerID2" class="spinnerDiv">
<!-- <img src='<c:url value="/resources/images/large_spinner_dharma.gif"/>' class="spinner" alt="Please Wait"/> -->
<h3>Loading...</h3>
</div>
<div id='graph-profile-main'></div>
<div id="help-container">
<div id="help-content">
</div>
</div>
</div>
</div>
</div>
剧本
var graph1 = [
[1210831200000, 7.01],
[1213596000000, 4.77],
[1216188000000, 6.77],
[1222322400000, 8.39],
[1229497200000, 4.64],
[1231225200000, 4.61],
[1241157600000, 5.37],
[1278655200000, 4.02],
[1288245600000, 4.85]
];
var graph2 = [
[1228374000000, 3.8],
[1232521200000, 4.32],
[1238997600000, 5.55],
[1247810400000, 5.84],
[1255413600000, 4.02],
[1263452400000, 4.02],
[1270447200000, 4.02],
[1278396000000, 4.02],
[1286258400000, 3.68],
[1294815600000, 5.02],
[1301637600000, 4.02],
[1312351200000, 4.02],
[1320822000000, 3.31],
[1325574000000, 3.31],
[1334124000000, 5.45],
[1335420000000, 4.02],
[1386778782000, 3.68],
[1387560819000, 5.74]
];
var tooltip1 = [
["<b>Tooltip1</b>"],
["<b>Tooltip2</b>"],
["<b>Tooltip3</b>"],
["<b>Tooltip4</b>"],
["<b>Tooltip5</b>"],
["<b>Tooltip6</b>"],
["<b>Tooltip7</b>"],
["<b>Tooltip8</b>"],
["<b>Tooltip9</b>"],
];
var tooltip2 = [
["<b>Tooltip1</b>"],
["<b>Tooltip2</b>"],
["<b>Tooltip3</b>"],
["<b>Tooltip4</b>"],
["<b>Tooltip5</b>"],
["<b>Tooltip6</b>"],
["<b>Tooltip7</b>"],
["<b>Tooltip8</b>"],
["<b>Tooltip9</b>"],
["<b>Tooltip10</b>"],
["<b>Tooltip11</b>"],
["<b>Tooltip12</b>"],
["<b>Tooltip13</b>"],
["<b>Tooltip14</b>"],
["<b>Tooltip15</b>"],
["<b>Tooltip16</b>"],
["<b>Tooltip17</b>"],
["<b>Tooltip18</b>"],
];
var datasets = {
'GRAPH1': {
data: graph1,
tooltip: tooltip1,
label: 'Label1'
},
'GRAPH2': {
data: graph2,
tooltip: tooltip2,
label: 'Label2'
},
};
var dMin = new Date(2007, 1, 15);
var dMax = new Date(2014, 6, 20);
var arrColors = ["#000099", "#D6A23C", "#C18F73"];
var options = {
canvas: true,
grid: {
hoverable: true,
clickable: true,
borderWidth: 0,
markings: [
{ color: '#000', lineWidth: 1, xaxis: { from: dMin, to: dMin } },
{ color: '#000', lineWidth: 1, yaxis: { from: 0, to: 0 } }
]
},
yaxis: { min: 0, max: 10 },
xaxis: {
min: dMin,
max: dMax,
mode: 'time',
timeformat: '%b %y',
monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
colors: arrColors,
lines: { show: true },
points: { show: true },
legend: { show: false }
};
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);
}
var previousPoint = null;
$("#graph-profile-main").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint !== item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
showTooltip(item.pageX, item.pageY, item.series.tooltip[item.dataIndex]);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
$("#graph-profile-main").bind("plotclick", function (event, pos, item) {
if (item) {
clicked(item);
}
});
var i = 0;
$.each(datasets, function (key, val) {
val.color = i;
++i;
});
function plotAccordingToChoices() {
var data = [];
data.push(datasets.GRAPH1);
data.push(datasets.GRAPH2);
if (data.length > 0) {
var dataPlot = $.plot($("#graph-profile-main"), data, options);
}
}
plotAccordingToChoices();
function clicked(item) {
return false;
}
$("#spinnerID2").hide();
$("#report").addClass("greyBkd");
$("#graph-profile-main").removeClass("displayNone");
我试图在这里重现你的问题:,但运气不好。还有,你真的想用它来代替吗?啊哈!由于您的JSFIDLE工作正常,我开始研究代码中的其他内容。以前在顶部有一个地方,我在那里复制另一个家里写的图书馆。你看,我觉得我不需要它。我替换了script/copy语句,flot开始工作。现在,我放回的声明与弗洛特没有任何关系。想想看。哦,不,与aReport的业务是我的疏忽。谢谢-你给我指明了正确的方向。