如何绘制在海军报图表X轴上的日期范围?(How to plot a date range on X-

2019-07-20 22:25发布

我使用FLOT图表,显示在一定时间内的数据(由用户,例如最近30天中选择,过去7天,从2013年1月1日到2013年3月3日等)

因此,我想显示与x轴的日期的线图。

例如,如果我有两天的startDate和结束日期如何让我的X轴显示是这样的:

2013年1月1日| 2013年1月2日........................ 3 2013年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服务器动态生成的数据

[{日期,值},{日期,值} ...]

格式。 请指导。

Answer 1:

你需要,如果你搜索的时间序列数据的数字更改为UNIX时间戳乘以1000这是一个从API:

在海军报的时间序列的支持是基于JavaScript的时间戳,即无处不在的时间值,预计或移交,使用的Javascript时间戳号码。 这是一个数字,而不是一个Date对象。 一个JavaScript时间戳是自1970 00:00:00 UTC 1月1日的毫秒数。 这是几乎一样的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/



文章来源: How to plot a date range on X-axis in Flot Charts?