我正在使用 Flot 图表显示特定时期的数据(由用户选择,例如过去 30 天、过去 7 天、从 2013 年 1 月 1 日到 2013 年 3 月 3 日等)
所以我想显示一个以 x 轴为日期的折线图。
例如如果我有两天的开始日期和结束日期,我该如何使 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
}
});
我意识到我需要让我的数据看起来像 [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/
关于javascript - 如何在图表中的 X 轴上绘制日期范围?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15199814/