如何在Flot Charts中的X軸上繪製日期範圍？

我使用浮點圖來顯示某段時間的數據（由用戶選擇，例如最近30天，最近7天，從2013年1月1日到2013年3月3日等）如何在Flot Charts中的X軸上繪製日期範圍？

所以我想以x軸爲日期顯示折線圖。

E.g.如果我有兩天，startDate和endDate如何使X軸顯示如下：

2013年1月1日| 2013年1月2日........................ 2013年3月3日

我的代碼如下：數據（目前爲靜態）。

var mydata = [ 
       [1, 2.4], 
       [2, 3.4 ], 
       [3, 4.5 ], 
       [4, 5 ], 
       [5, 5], 
       [6, 5], 
       [7, 2 ], 
       [8, 1 ], 
       [9, 1.5 ], 
       [10, 2.5 ], 
       [11, 3.5], 
       [12, 4 ], 
       [13, 4 ], 
       [14, 2.4], 
       [15, 3.4 ], 
       [16, 4.5 ], 
       [17, 5 ], 
       [18, 5], 
       [19, 5], 
       [20, 2 ], 
       [21, 1 ], 
       [22, 1.5 ], 
       [23, 2.5 ], 
       [24, 3.5], 
       [25, 4 ], 
       [26, 4 ], 
       [27, 2.5 ], 
       [28, 3.5], 
       [29, 4 ], 
       [30, 4 ], 
      ]; 

var plot = $.plot($("#mychart"), [{ 
       data: mydata, 
       label: "Y-axis label" 
      }], { 
       series: { 
        lines: { 
         show: true 
        }, 
        points: { 
         show: true 
        }, 
        shadowSize: 2 
       }, 
       grid: { 
        hoverable: true, 
        clickable: true 
       }, 
       colors: ["#37b7f3", "#d12610", "#52e136"], 
       xaxis: { 
        mode: "time", timeformat: "%d/%m/%y", minTickSize: [1, "day"] 
       }, 
       yaxis: { 
        ticks: 11, 
        tickDecimals: 0, 
      min:0, max: 5 
       } 
      });

我意識到我需要MYDATA樣子[日期值。這會工作嗎？我已經通過動態在JSON服務器在

生成的數據[{日期，值}，{日期，值} ...]

格式。請指導。

來源

2013-03-04 LittleLebowski

你需要的數字更改爲UNIX時間戳乘以1000這是一個從API如果搜索時間序列數據：

在海軍報的時間序列的支持是基於JavaScript的時間戳，即在任何時間值預計或移交時，都會使用Javascript 時間戳編號。這是一個數字，而不是Date對象。 A Javascript時間戳是自1月1日起的毫秒數， 1970 00:00:00 UTC。這與Unix時間戳幾乎相同，除了它是以毫秒爲單位的，所以請記住乘以1000！

還有就是API在.NET例如：

public static int GetJavascriptTimestamp(System.DateTime input) 
{ 
System.TimeSpan span = new System.TimeSpan(System.DateTime.Parse("1/1/1970").Ticks); 
System.DateTime time = input.Subtract(span); 
return (long)(time.Ticks/10000); 
}

下面是一個例子 - http://jsfiddle.net/zxtFc/4/

來源

2013-03-04 15:07:14 Blake

非常感謝。解決了它！ – LittleLebowski 2013-03-04 15:09:22

您乘以10,000，而不是1,000，並且您的示例未指定您使用何種方法定義的方法。此外，你正在定義一個新的DateTime，所以爲什麼要在年，月，日傳遞時解析一個字符串呢？ – Kehlan 2014-08-05 18:02:31

終於......這似乎很簡單，沒有工作。我得到的刻度在第1年的某個地方評估。 – Kehlan 2014-08-05 18:10:51

如何在Flot Charts中的X軸上繪製日期範圍？

回答

相關問題