javascript 如何在 Flot Charts 的 X 轴上绘制日期范围？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15199814/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to plot a date range on X-axis in Flot Charts?
提问by LittleLebowski
I'm using Flot charts to display data for a certain period (to be selected by the user, e.g. last 30 days, last 7 days, from 1st Jan 2013 to 3rd Mar 2013 etc)
我正在使用 Flot 图表来显示特定时期的数据（由用户选择，例如过去 30 天、过去 7 天、2013 年 1 月 1 日至 2013 年 3 月 3 日等）
So I want to display a line chart with x-axis as the date.
所以我想显示一个以 x 轴为日期的折线图。
E.g. if I've two days, startDate and endDate how do I make the X-axis display something like:
例如，如果我有两天的 startDate 和 endDate 如何使 X 轴显示如下：
1 Jan 2013 | 2 Jan 2013........................3 Mar 2013
2013 年 1 月 1 日 | 2013 年 1 月 2 日......................2013 年 3 月 3 日
My code is as follows: The data (currently it's static).
我的代码如下：数据（目前是静态的）。
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
}
});
I realize that I need to make mydata look like [date, value]. Will that work? I've the data dynamically generated by the server in JSON in
我意识到我需要让 mydata 看起来像 [date, value]。那行得通吗？我在 JSON 中由服务器动态生成的数据
[{date, value}, {date, value}...]
[{日期，值}，{日期，值}...]
format. Please guide.
格式。请指导。
回答by Blake
You will need to change the numbers to UNIX time stamps multiplied by 1000. This is from the API if you search Time Series Data:
您需要将数字更改为 UNIX 时间戳乘以 1000。如果您搜索时间序列数据，这是来自 API：
The time series support in Flot is based on Javascript timestamps, i.e. everywhere a time value is expected or handed over, a Javascript timestamp number is used. This is a number, not a Date object. A Javascript timestamp is the number of milliseconds since January 1, 1970 00:00:00 UTC. This is almost the same as Unix timestamps, except it's in milliseconds, so remember to multiply by 1000!
Flot 中的时间序列支持基于 Javascript 时间戳，即在预期或传递时间值的任何地方，都使用 Javascript 时间戳编号。这是一个数字，而不是 Date 对象。Javascript 时间戳是自 1970 年 1 月 1 日 00:00:00 UTC 以来的毫秒数。这几乎与 Unix 时间戳相同，只是它以毫秒为单位，所以请记住乘以 1000！
There is a .Net example in the API:
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);
}
Here is an example - http://jsfiddle.net/zxtFc/4/
这是一个例子 - http://jsfiddle.net/zxtFc/4/
