如何在Flot Charts中在X轴上绘制日期范围?

我正在使用Flot图表显示特定时期的数据(由用户选择,例如最近30天,最后7天,从2013年1月1日到2013年3月3日等)

所以我想显示一个以x轴为日期的折线图。

例如,如果我有两天,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看起来像[date,value]。 那会有用吗? 我在JSON中用服务器动态生成数据

[{date,value},{date,value} …]

格式。 请指导。

您需要将数字更改为UNIX时间戳乘以1000.如果您搜索时间序列数据,则来自API:

Flot中的时间序列支持基于Javascript时间戳,即在预期或移交时间值的任何地方,使用Javascript时间戳编号。 这是一个数字,而不是Date对象。 Javascript时间戳是自1970年1月1日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/