問題のコードから始めましょう。
<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 の値が上部の div に表示されます。それを「new Date(x)」として Javascript コンソールにコピーすると、正しい日付が生成されます。
バーの上にマウスを置くと、1 か月以上ずれている日付が表示されます。それはなぜですか、どうすれば修正できますか?