如何在Flot图表中将日期范围绘制在X轴上？

Question

我正在使用Flot图表来显示一定时间段内的数据（由用户选择，例如最近30天，最近7天，从2013年1月1日到2013年3月3日等）。

因此，我想显示一个折线图，其中x轴为日期。

例如，如果我有两天的起始日期和结束日期，如何使X轴显示类似于：

1 Jan 2013 | 2 Jan 2013........................3 Mar 2013

我的代码如下： 数据（目前是静态的）。

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
                }
            });

我知道我需要让我的数据看起来像[date, value]。这样可以吗？服务器以JSON格式动态生成数据，格式如下：[{date, value}, {date, value}...]。请指导。

- LittleLebowski

Answer 1

您需要将数字更改为UNIX时间戳乘以1000。如果您搜索时间序列数据，则此信息来自API：

Flot中的时间序列支持基于JavaScript时间戳，即在期望或传递时间值的任何地方，都使用JavaScript时间戳数字。这是一个数字，而不是日期对象。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/

- Blake

---

你正在乘以一万，而不是一千，你的示例没有指定定义的方法何时/在哪里使用。此外，您正在定义一个新的DateTime，因此为什么要解析字符串，而不是直接传递年份、月份和日期？ - keeehlan

最后...这似乎根本不起作用。我得到的刻度值计算出来是在公元1年左右。 - keeehlan

这个例子来自API。你有没有在“时间序列数据”下面阅读FLOT文档？它完全正常工作。 - Blake