Flot 在时间轴上表现不佳

Question

我无法让 Flot 格式化时间序列日期。我的 xaxis 看起来像这样：

 16:63 20:26 00:36 08:36 12:36 16:36 20:36

这是怎么发生的？是时候了吗？

我正在接受“%y/%m/%d”格式的数据。

我正在使用 0.8.0-alpha 和 angular2。

下面是我的代码：

       let dataset = [
        {
            label: "Mean",
            data: data_ts["mean_1"],
            //color: "#FF0000",
            points: { fillColor: "#FF0000", show: true },
            lines: { show: true }
        },
        {
            label: "Var",
            data: data_ts["var_1"],
            //color: "#FF0000",
            points: { fillColor: "#FF0000", show: true },
            lines: { show: true }
        }
    ];

    let options = {
        xaxis: { mode: "time" },
        minTickSize: [1, "month"],
        timeformat: "%y/%m/%d"
    };
    this.plot = $.plot($("#placeholder_ts"),dataset,options);
    this.plot.setupGrid();
    this.plot.draw();

这是我的带有时间戳的数据：

{
    "mean_1": [
        [1262188800.0, 500],
        [1264867200.0, 500],
        [1267286400.0, 500],
        [1269964800.0, 492],
        [1272556800.0, 484],
        [1275235200.0, 484],
        [1277827200.0, 477],
        [1280505600.0, 477],
        [1283184000.0, 470],
        [1285776000.0, 475],
        [1288454400.0, 471],
        [1291046400.0, 480],
        [1293724800.0, 480],
        [1296403200.0, 489],
        [1298822400.0, 489],
        [1301500800.0, 489],
        [1304092800.0, 490],
        [1306771200.0, 500],
        [1309363200.0, 500],
        [1312041600.0, 500],
        [1314720000.0, 500],
        [1317312000.0, 490],
        [1319990400.0, 484],
        [1322582400.0, 492],
        [1325260800.0, 492],
        [1327939200.0, 488],
        [1330444800.0, 498],
        [1333123200.0, 498],
        [1335715200.0, 499],
        [1338393600.0, 493],
        [1340985600.0, 485],
        [1343664000.0, 493],
        [1346342400.0, 493],
        [1348934400.0, 493],
        [1351612800.0, 498],
        [1354204800.0, 498],
        [1356883200.0, 506],
        [1359561600.0, 510],
        [1361980800.0, 510],
        [1364659200.0, 510],
        [1367251200.0, 514],
        [1369929600.0, 516],
        [1372521600.0, 516],
        [1375200000.0, 513],
        [1377878400.0, 513],
        [1380470400.0, 517],
        [1383148800.0, 517]
    ],
    "var_1": [
        [1262188800.0, 300],
        [1264867200.0, 300],
        [1267286400.0, 300],
        [1269964800.0, 292],
        [1272556800.0, 284],
        [1275235200.0, 284],
        [1277827200.0, 277],
        [1280505600.0, 277],
        [1283184000.0, 270],
        [1285776000.0, 275],
        [1288454400.0, 271],
        [1291046400.0, 280],
        [1293724800.0, 280],
        [1296403200.0, 289],
        [1298822400.0, 289],
        [1301500800.0, 289],
        [1304092800.0, 290],
        [1306771200.0, 300],
        [1309363200.0, 300],
        [1312041600.0, 300],
        [1314720000.0, 300],
        [1317312000.0, 290],
        [1319990400.0, 284],
        [1322582400.0, 292],
        [1325260800.0, 292],
        [1327939200.0, 288],
        [1330444800.0, 298],
        [1333123200.0, 298],
        [1335715200.0, 299],
        [1338393600.0, 293],
        [1340985600.0, 285],
        [1343664000.0, 293],
        [1346342400.0, 293],
        [1348934400.0, 293],
        [1351612800.0, 298],
        [1354204800.0, 298],
        [1356883200.0, 306],
        [1359561600.0, 310],
        [1361980800.0, 310],
        [1364659200.0, 310],
        [1367251200.0, 314],
        [1369929600.0, 316],
        [1372521600.0, 316],
        [1375200000.0, 313],
        [1377878400.0, 313],
        [1380470400.0, 317],
        [1383148800.0, 317]
    ]
}

Answer 1

你不应该把 timeformat 放在 xaxis 里面，还有 minTickSize:

let options = {
    xaxis: { 
       mode: "time", 
       timeformat: "%y/%m/%d",
       minTickSize: [1, "month"]
    }        
};

Flot 在时间轴上表现不佳

Flot misbehaves with time axis

angular

flot