簡體   English   中英

Flot工具提示中顯示的日期不正確

[英]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>

http://jsfiddle.net/XBCvq/

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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM