Question

我正在尝试使用Flot创建时间序列图来比较两个系列的数据。在包含jQuery，jquery.flot.js和jquery.flot.time.js后，我的代码如下：

$(function () {
  var d1 = {
    label: "Fall 2011",
    data: [
      [1296536400, 9],
      [1296622800, 23],
      [1296709200, 30],
      [1296795600, 64],
      [1296882000, 94],
      [1296968400, 113],
      [1297054800, 125],
      [1297141200, 156],
      [1297227600, 181],
      [1297314000, 200],
      [1297400400, 217],
      [1297486800, 231],
      [1297573200, 248],
      [1297659600, 259],
      [1297746000, 271],
      [1297832400, 282],
      [1297918800, 308],
      [1298005200, 316],
      [1298091600, 332],
      [1298178000, 345],
      [1298264400, 360],
      [1298350800, 373],
      [1298437200, 391],
      [1298523600, 409],
      [1298610000, 427],
      [1298696400, 433],
      [1298782800, 444],
      [1298869200, 460],
      [1298955600, 467],
      [1299042000, 479],
      [1299128400, 494],
      [1299214800, 500],
      [1299301200, 509],
      [1299387600, 530],
      [1299474000, 548],
      [1299560400, 567],
      [1299646800, 577],
      [1299733200, 596],
      [1299819600, 608],
      [1299906000, 623],
      [1299992400, 638],
      [1300075200, 651],
      [1300161600, 670],
      [1300248000, 689],
      [1300334400, 712],
      [1300420800, 722],
      [1300507200, 737],
      [1300593600, 764],
      [1300680000, 784],
      [1300766400, 807],
      [1300852800, 839],
      [1300939200, 865],
      [1301025600, 880],
      [1301112000, 901],
      [1301198400, 937],
      [1301284800, 970],
      [1301371200, 1000],
      [1301457600, 1030],
      [1301544000, 1064],
      [1301630400, 1081],
      [1301716800, 1111],
      [1301803200, 1144],
      [1301889600, 1176],
      [1301976000, 1207],
      [1302062400, 1232],
      [1302148800, 1251],
      [1302235200, 1270],
      [1302321600, 1293],
      [1302408000, 1329],
      [1302494400, 1361],
      [1302580800, 1398],
      [1302667200, 1442],
      [1302753600, 1474],
      [1302840000, 1499],
      [1302926400, 1524],
      [1303012800, 1553],
      [1303099200, 1585],
      [1303185600, 1619],
      [1303272000, 1658],
      [1303358400, 1703],
      [1303444800, 1754],
      [1303531200, 1784],
      [1303617600, 1830],
      [1303704000, 1896],
      [1303790400, 1968],
      [1303876800, 2045],
      [1303963200, 2140],
      [1304049600, 2230],
      [1304136000, 2337],
      [1304222400, 2457],
      [1304308800, 2532],
      [1304395200, 2587],
      [1304481600, 2618],
      [1304568000, 2641],
      [1304654400, 2658],
      [1304740800, 2675],
      [1304827200, 2690],
      [1304913600, 2703],
      [1305000000, 2719],
      [1305086400, 2735],
      [1305172800, 2746],
      [1305259200, 2757],
      [1305432000, 2761],
      [1305518400, 2778],
      [1305604800, 2794],
      [1305691200, 2800],
      [1305777600, 2804],
      [1305864000, 2813],
      [1305950400, 2821],
      [1306036800, 2822],
      [1306123200, 2833],
      [1306209600, 2843],
      [1306296000, 2854],
      [1306382400, 2860],
      [1306468800, 2871],
      [1306555200, 2875],
      [1306728000, 2879],
      [1306814400, 2883],
      [1306900800, 2886],
      [1306987200, 2891],
      [1307073600, 2894],
      [1307160000, 2897],
      [1307246400, 2898],
      [1307332800, 2903],
      [1307419200, 2907],
      [1307505600, 2913],
      [1307592000, 2914],
      [1307678400, 2919],
      [1307764800, 2920],
      [1307851200, 2923],
      [1308024000, 2929],
      [1308110400, 2935],
      [1308196800, 2936],
      [1308283200, 2937],
      [1308369600, 2940],
      [1308456000, 2941],
      [1308542400, 2946],
      [1308628800, 2949],
      [1308715200, 2957],
      [1308801600, 2958],
      [1308888000, 2962],
      [1308974400, 2963],
      [1309060800, 2965],
      [1309147200, 2969],
      [1309233600, 2970],
      [1309320000, 2974],
      [1309406400, 2975],
      [1309492800, 2976],
      [1309924800, 2978],
      [1310702400, 2979],
      [1310875200, 2980],
      [1310961600, 2981],
      [1311134400, 2982],
      [1311566400, 2983],
      [1311652800, 2984]
    ]
  };
  $.plot("#placeholder", [d1], {
    xaxis: {
      mode: "time",
      timeformat: "%m/%d %h:%m"
    },
    legend: {
      show: true,
      position: 'se'
    }
  });
});

这会生成图表： Graph

请注意，x轴标签不正确。 unix时间戳的范围从2011年2月1日到2011年7月26日。我尝试了各种'timeformat'和'minTickSize'选项，但无济于事。我究竟做错了什么？如何让标签显示整个数据范围的月份和日期名称？

Answer 1

您希望将UNIX时间戳乘以1000，以便将它们转换为适当的Javascript格式。

Answer 2

这应该给你一个开始 - http://jsfiddle.net/TZWbN/

  data: [

         [1308888000000, 2962],
      [1308974400000, 2963],
      [1309060800000, 2965],
      [1309147200000, 2969],
      [1309233600000, 2970],
      [1309320000000, 2974],
      [1309406400000, 2975],
      [1309492800000, 2976],
      [1309924800000, 2978],
      [1310702400000, 2979],
      [1310875200000, 2980],
      [1310961600000, 2981],
      [1311134400000, 2982],
      [1311566400000, 2983],
      [1311652800000, 2984]]
  };

Flot Time Series日期标签不正确

2 个答案: