Question

我有一个 jQuery flot 图表，其中包含第一个x轴刻度未对齐的时间序列（溢出图表边框外）。该图表有自定义刻度显示日期。

var options = {
    xaxis: {
        mode: "time",
        timeformat: "%Y-%m-%d",
        ticks: [1372636800000, 1372723200000, 1372809600000] 
    },
    yaxis: {
        tickLength: 0
    },
    legend: {
        show: false
    }
};

var readings = [
    {
        "label": "Trend 1",
        "data": [
            [
                1372636800000, //Mon, 01 Jul 2013 00:00:00 UTC
                2.65
            ],
            [
                1372723200000, //Tue, 02 Jul 2013 00:00:00 UTC
                0.13
            ],
            [
                1372809600000, //Wed, 03 Jul 2013 00:00:00 UTC
                0.51
            ]
        ]
    },
    {
        "label": "Trend 2",
        "data": [
            [
                1372636800000, //Mon, 01 Jul 2013 00:00:00 UTC
                2.19
            ],
            [
                1372723200000, //Tue, 02 Jul 2013 00:00:00 UTC
                1.56
            ],
            [
                1372809600000, //Wed, 03 Jul 2013 00:00:00 UTC
                1.42
            ],
        ]
    }
]

$(function () {
    $.plot($("#chart"), readings, options);
});

enter image description here

据我所知，时间戳正确代表UTC YYYY-MM-DD 00:00:00。

导致错位的原因是什么？我该如何解决？

Answer 1

图表边框左侧的线不是第一个x轴刻度线（您可以看到当您将第一个刻度线更改为例如1372642800000时）。

该线属于y轴刻度，您做得很小，以至于它们不可见。如果将y轴tickLength更改为3，则会在细线上看到刻度线。如果您将tickLength更改为5以上，则只会看到自己的标记，并且该行已消失。（有关其他样式，请查看tickLength: null或否定值。）

要获得不带行的隐形刻度，您可以使用tickLength: 6, tickColor: 'white'。 Updated Fiddle

jQuery flot时间序列轴刻度溢出图表边框

1 个答案: