Flot rotateTicks xaxis дата, отображающая дополнительный день - PullRequest
Новая
       38

Flot rotateTicks xaxis дата, отображающая дополнительный день

0 голосов
/ 28 сентября 2018

Я использую 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>

Показанный график: 31 мая отображается, но не в предоставленных данных.

enter image description here

Я не понимаю, где и почему 31 маяотображается.

1 Ответ

0 голосов
/ 28 сентября 2018

Это проблема часового пояса, все ваши даты сдвинуты на один день (или несколько часов, что приводит к смене дня).Измените функцию gd(), чтобы использовать время UTC, и график выглядит хорошо: 

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

См. Этот fiddle для полного примера и документацию для получения дополнительной информации.,Наиболее важная часть:

Поведение по умолчанию заключается в том, что Flot всегда отображает метки времени в соответствии с UTC.Причина в том, что основной объект Javascript Date не поддерживает другие фиксированные часовые пояса.Часто ваши данные находятся в другом часовом поясе, поэтому может потребоваться небольшая настройка, чтобы обойти это ограничение.

...