如何在 Flot Charts 的 X 轴上绘制日期范围？答案

【问题标题】：How to plot a date range on X-axis in Flot Charts?如何在 Flot Charts 的 X 轴上绘制日期范围？
【发布时间】：2013-03-04 10:51:15
【问题描述】：

我正在使用 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, 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 看起来像 [date, value]。那会奏效吗？我在

中有服务器以 JSON 格式动态生成的数据

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

格式。请指导。

【问题讨论】：

标签： javascript jquery charts flot

【解决方案1】：

您需要将数字更改为 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/

【讨论】：

您乘以 10,000，而不是 1,000，并且您的示例未指定何时/何地使用您定义的方法。此外，您正在定义一个新的 DateTime，那么当您可以只传递年、月和日时，为什么还要解析一个字符串呢？
最后...这似乎根本行不通。我在第一年得到评估的蜱虫。
这个例子来自API。您是否阅读了“时间序列数据”下的 FLOT 文档？它工作得很好。