我正在使用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,[7,2 ],[8,1 ],[9,1.5 ],[10,2.5 ],[11,3.5],[12,4 ],[13,[14,[15,[16,[17,[18,[19,[20,[21,[22,[23,[24,[25,[26,[27,[28,[29,[30,];
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时间戳是自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/
