FlotrotrotTicks xaxis日期显示额外的一天 [英] Flot rotateTicks xaxis date displaying an extra day

问题描述

我正在使用Flot来显示每天的使用量，但我不明白为什么图表中没有添加数据(如果没有添加额外的一天)呢?

I'm using Flot for displaying usage per day but I don't understand why an extra day, that is not in provided data is added in the graph?

代码段:

<script>
var statement = [
    [gd(2018, 6, 1), 0],
    [gd(2018, 6, 2), 2000000],
    [gd(2018, 6, 3), 240000000],
    [gd(2018, 6, 4), 260000000],
    [gd(2018, 6, 5), 280000000],
    [gd(2018, 6, 6), 300000000],
    [gd(2018, 6, 7), 320000000],
    [gd(2018, 6, 8), 0],
    [gd(2018, 6, 9), 0],
    [gd(2018, 6, 10), 0],
    [gd(2018, 6, 11), 0],
    [gd(2018, 6, 12), 0],
    [gd(2018, 6, 13), 0],
    [gd(2018, 6, 14), 0],
    [gd(2018, 6, 15), 0],
    [gd(2018, 6, 16), 0],
    [gd(2018, 6, 17), 0],
    [gd(2018, 6, 18), 0],
    [gd(2018, 6, 19), 0],
    [gd(2018, 6, 20), 0],
    [gd(2018, 6, 21), 0],
    [gd(2018, 6, 22), 0],
    [gd(2018, 6, 23), 0],
    [gd(2018, 6, 24), 0],
    [gd(2018, 6, 25), 0],
    [gd(2018, 6, 26), 0],
    [gd(2018, 6, 27), 0],
    [gd(2018, 6, 28), 0],
    [gd(2018, 6, 29), 0],
    [gd(2018, 6, 30), 0]
];
var dataset = [{
    label: "Electricity Consumption",
    data: statement,
    color: "#ffa500",
    bars: {
        show: true,
        align: "center",
        barWidth: 24 * 60 * 60 * 600,
        lineWidth: 1
    }
}];


var options = {
    xaxis: {
        mode: "time",
        tickSize: [1, "day"],
        timeformat: "%d %b",
        tickLength: 0,
        rotateTicks: 135,
        axisLabel: "",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 8,
        axisLabelFontFamily: "Verdana, Arial",
        axisLabelPadding: 5,
        color: "black"
    },
    yaxes: [{
        position: "left",
        color: "black",
        axisLabel: "Usage",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: "Verdana, Arial",
        axisLabelPadding: 3,
        tickDecimals: 0,
        tickFormatter: function numberWithCommas(x) {
            return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
        }
    }],
    legend: {
        container: $("#legendContainer"),
        noColumns: 2,
        labelBoxBorderColor: "#000000",
        position: "nw"
    },
    grid: {
        hoverable: true,
        borderWidth: 1,
        backgroundColor: {
            colors: ["#ffffff", "#EDF5FF"]
        }
    }
};
$(document).ready(function() { $.plot($("#graph-placeholder"), dataset, options); }); 
function gd(year, month, day) { return new Date(year, month -1, day).getTime(); }
</script>

显示的图形: 显示5月31日，但未提供数据.

Displayed graph: May 31 is displayed but is not in provided data.

我不知道5月31日显示在哪里以及为什么显示.

I don't understand where and why May 31 is displayed.

推荐答案

这是一个时区问题，您的所有日期都偏移了一天(或某些小时，导致一天更改).更改您的gd()函数以使用UTC时间，该图看起来很好:

This a a timezone problem, all of your dates are shifted by one day (or some hours which leads to a day change). Change your gd() function to use UTC time and the plot looks fine:

function gd(year, month, day) { return Date.UTC(year, month - 1, day); }

请参阅此小提琴，以获取完整示例和

See this fiddle for a full example and the documentation for more information. The most important part:

默认行为是Flot始终根据UTC显示时间戳.原因是核心Javascript Date对象不支持其他固定时区.通常，您的数据位于另一个时区，因此可能需要一些调整才能解决此限制.

Default behavior is that Flot always displays timestamps according to UTC. The reason being that the core Javascript Date object does not support other fixed time zones. Often your data is at another time zone, so it may take a little bit of tweaking to work around this limitation.

这篇关于FlotrotrotTicks xaxis日期显示额外的一天的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！