1

問題のコードから始めましょう。

<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>

http://jsfiddle.net/XBCvq/

x 軸の日付ラベルは正しいです。マウスオーバーすると、x の値が上部の div に表示されます。それを「new Date(x)」として Javascript コンソールにコピーすると、正しい日付が生成されます。

バーの上にマウスを置くと、1 か月以上ずれている日付が表示されます。それはなぜですか、どうすれば修正できますか?

4

1 に答える 1