我使用Morris.js显示折线图,并将时间戳作为X轴值输入。
作为一个例子将比任何解释更好,这是一个示例数据:
{
"1415376000":
{"VALUE1":0,"VALUE2":0,"VALUE3":16,"VALUE4":0},
"1415980800":
{"VALUE1":0,"VALUE2":0,"VALUE3":2,"VALUE4":0},
"1416585600":
{"VALUE1":0,"VALUE2":0,"VALUE3":2,"VALUE4":0},
"1417190400":
{"VALUE1":0,"VALUE2":0,"VALUE3":7,"VALUE4":0},
"1417795200":
{"VALUE1":10,"VALUE2":6,"VALUE3":16,"VALUE4":3},
"1418400000":
{"VALUE1":5,"VALUE2":4,"VALUE3":67,"VALUE4":5},
"1419004800":
{"VALUE1":3,"VALUE2":0,"VALUE3":38,"VALUE4":3},
"1419609600":
{"VALUE1":4,"VALUE2":1,"VALUE3":24,"VALUE4":1}
}
如您所见," 1419609600" -ish数据是Unix时间戳(通过php mktime() function创建)。两个时间戳之间的时间是动态生成的,这里是一周(604800秒)。
日期格式奇怪,变换不佳:mktime()生成的实际日期是2014年11月至12月...
在初始化时添加dateFormat: function (x) { return new Date(x * 1000).toString(); }
(而不是默认的dateFormat: function (x) { return new Date(x).toString(); }
)参数,将此秒时间戳转换为毫秒时间戳,结果比我们预期的更接近:
但是,如何将此日期显示为" 2014年12月5日至12日"例如 ?我尝试使用xLabels
参数dateFormat
参数,但这不会改变任何内容或引发错误。
作为一个附带问题,由于我的时间戳有一个动态范围(时间戳最小值和时间戳最大值之间的差异可以是一天,一个月,一年......),Morris.js是否有办法采取考虑到这一点并动态适应这个范围,显示天或者monthes,......? 根据我对文档的理解,这应该是可能的,但我可能是错的......
非常感谢。
答案 0 :(得分:1)
dateFormat: function (x) {
var d = new Date(x * 1000);
var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
return d.getDate()+' '+monthNames[d.getMonth()]+' '+d.getFullYear();
}
试试吧,
关于javascript方法
getDate()
- http://www.w3schools.com/jsref/jsref_getdate.asp
getMonth()
- http://www.w3schools.com/jsref/jsref_getmonth.asp
getFullYear()
- http://www.w3schools.com/jsref/jsref_getfullyear.asp