Question

我正在使用Flot来显示每天的使用量，但我不明白为什么在图形中添加了多余的一天（如果没有提供数据）呢？

代码段：

<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日，但未提供数据。

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

Answer 1

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

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

有关完整示例，请参见此fiddle，有关更多信息，请参见documentation。最重要的部分：

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

FlotrotrotTicks xaxis日期显示额外的一天

1 个答案: