[英]Incorrect date being displayed in Flot tooltip
讓我們從有問題的代碼開始:
<div id="debug"></div><br />
<div id="placeholder" class="demo-placeholder"></div>
<script language="javascript" type="text/javascript" src="/doppelog/static/doppelog/js/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="/doppelog/static/doppelog/js/jquery.flot.time.js"></script>
<script type="text/javascript">
$(function()
{
var alc =
{
label:"ALC", data:
[
[1.3765428e+12,2],
[1.3775796e+12,88],
[1.377666e+12,109],
[1.3777524e+12,65],
]
};
var options =
{
//points: {show:true},
bars: {show:true, fill: .65, barWidth:0.85*24*60*60*1000}, //leading co-efficient for bar width, other scalars to get to 1 day resolution
xaxis:
{
mode: "time",
timeformat: "%Y-%m-%d",
autoscaleMargin: null
},
grid: {hoverable:true}
};
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;
$("#placeholder").bind("plothover", function (event, pos, item)
{
if (item)
{
if (previousPoint != item.dataIndex)
{
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0],
y = item.datapoint[1],
d = new Date(x),
td = d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
document.getElementById("debug").innerHTML=x;
showTooltip(item.pageX, item.pageY, td + ": " + y);
}
}
else
{
$("#tooltip").remove();
previousPoint = null;
}
});
$.plot("#placeholder", [alc], options);
//document.getElementById("debug").innerHTML=alc[1];
});
</script>
x軸上的日期標簽是正確的。 在鼠標懸停時,x的值顯示在頂部頂部。 當您將其作為“新日期(x)”復制到Javascript控制台時,將生成正確的日期。
當您將鼠標懸停在某個條形圖上時,會顯示一個超過一個月的日期。 為什么會這樣,我該如何解決?
大多數差異是由於幾個月(由getMonth返回)從零開始,其余的是因為您沒有考慮UTC偏移。
重新使用Flot自己的formatDate函數要容易得多,如下所示:
var DATE_FORMAT = "%Y-%m-%d"; // Use this in your plot options as well
...
showTooltip(item.pageX, item.pageY, $.plot.formatDate(d, DATE_FORMAT) + ":" + y);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.