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

前端之家收集整理的这篇文章主要介绍了javascript – 如何在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,[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/

原文链接:https://www.f2er.com/js/158385.html

猜你在找的JavaScript相关文章