如何在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轴上绘制日期范围？

回答

相关问题