Flot Js上奇怪的Y轴

I'm using Flot Js to generate this graph: Flot Js上奇怪的Y轴

我正在使用Flot Js生成此图:

My problem is on Y-Axis, it starts at 23:00:00 and ends in 23:00:00 too. My goal is Y-Axis start at 00:00:00 and ends at 23:59:59.

我的问题是在Y轴上,它从23:00:00开始,也在23:00:00结束。我的目标是Y轴从00:00:00开始,到23:59:59结束。

My js code is:

我的js代码是:

$(function() {
    var data1 = [
    ["Pedro",gt(2015,05,13,20,01,00)],["João",gt(2015,05,13,07,09,00)],["José",gt(2015,05,13,00,00,00)],["Gustavo",gt(2015,05,13,13,00,00)],["Tenico Hotel",gt(2015,05,13,01,00,00)],["Gualter",gt(2015,05,13,23,25,00)],["Joao",gt(2015,05,13,02,30,00)],["José",gt(2015,05,13,00,00,00)],["Maria",gt(2015,05,13,00,00,00)],["Avatar",gt(2015,05,13,00,00,00)]     ];

    function gt(year, month, day,hours,min,secs){
        return new Date(year, month-1, day,hours,min, secs).getTime();
    }

    var chart = $("#chart");

    $.plot(chart, [data1],{
        series: {
            bars: {
                show: true,
                barWidth: 0.3,
                align: "center"
            }
        },
        xaxis: {
            mode: "categories",
            tickLength: 0
        },
        yaxis: {
            mode: "time",
            timeformat: "%H:%M:%S",
            min: (new Date("2015/05/13 00:00:00")).getTime(),
            max: (new Date("2015/05/13 23:59:59")).getTime(),
            tickSize: [1,"hour"]
        }
    });
    chart.resize();
});

Already had searched and don't find any clue why this happen.

已经搜索过,但没有找到任何线索,为什么会发生这种情况。

Thanks in advance.

提前致谢。

1 个解决方案

#1

You're running into timezone issues.

你遇到了时区问题。

If you add 'UTC' to your min and max date strings, your y-axis goes from 00:00:00 to 23:59:59.

如果在最小和最大日期字符串中添加“UTC”,则y轴从00:00:00到23:59:59。

I've created a JS fiddle to demonstrate. You'll have to work with the dates in your data array to get them into UTC as well.

我已经创建了一个JS小提琴来演示。您必须使用数据数组中的日期才能将它们转换为UTC。

Flot's API.md elaborates on how it handles dates:

Flot的API.md详细说明了它如何处理日期:

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.

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

You could also set the timezone of your axis by specifying (from the Flot API.md):

您还可以通过指定(从Flot API.md)设置轴的时区:

yaxis: {
    mode: "time"
    timezone: null, "browser" or timezone (only makes sense for mode: "time")
}

#1