HighCharts日期格式
HighCharts Date Formatting
已经开始使用HiagCharts从XML数据生成一些图表,但是日期/时间根本无法呈现。
在SQL Server 2012上直接从"FOR XML AUTO"查询生成的XML文件如下:
<tbldashboardgroups dashboard_group_name="Hard Drive Space">
<tblnodesensors id="4" deviceid="C:">
<tblsensordata sensordata="36006309888" dtetme="2014-08-12T19:27:13"/>
<tblsensordata sensordata="33623793664" dtetme="2014-08-13T06:52:17"/>
<tblsensordata sensordata="33979367424" dtetme="2014-08-14T14:42:23"/>
<tblsensordata sensordata="34030342144" dtetme="2014-08-15T07:48:21"/>
<tblsensordata sensordata="34024259584" dtetme="2014-08-15T07:49:07"/>
<tblsensordata sensordata="33818914816" dtetme="2014-08-15T09:07:56"/>
<tblsensordata sensordata="33818447872" dtetme="2014-08-15T09:08:10"/>
<tblsensordata sensordata="33817014272" dtetme="2014-08-15T09:08:20"/>
<tblsensordata sensordata="33682038784" dtetme="2014-08-15T09:16:29"/>
<tblsensordata sensordata="33684578304" dtetme="2014-08-15T09:18:47"/>
<tblsensordata sensordata="33611354112" dtetme="2014-08-15T10:02:31"/>
<tblsensordata sensordata="33579536384" dtetme="2014-08-16T12:43:09"/>
<tblsensordata sensordata="30933770240" dtetme="2014-08-17T11:08:00"/>
<tblsensordata sensordata="29468946432" dtetme="2014-08-18T12:13:41"/>
<tblsensordata sensordata="29465878528" dtetme="2014-08-18T18:05:15"/>
<tblsensordata sensordata="29467230208" dtetme="2014-08-18T18:05:28"/>
<tblsensordata sensordata="29462601728" dtetme="2014-08-18T18:10:24"/>
<tblsensordata sensordata="29104414720" dtetme="2014-08-18T22:48:49"/>
<tblsensordata sensordata="29104013312" dtetme="2014-08-18T22:49:08"/>
<tblsensordata sensordata="29102968832" dtetme="2014-08-18T22:49:16"/>
</tblnodesensors><tblnodesensors id="5" deviceid="E:">
<tblsensordata sensordata="62401007616" dtetme="2014-08-12T19:27:13"/>
<tblsensordata sensordata="62401007616" dtetme="2014-08-13T06:52:17"/>
<tblsensordata sensordata="62400991232" dtetme="2014-08-14T14:42:23"/>
<tblsensordata sensordata="62400913408" dtetme="2014-08-15T07:48:21"/>
<tblsensordata sensordata="62400913408" dtetme="2014-08-15T07:49:07"/>
<tblsensordata sensordata="62400909312" dtetme="2014-08-15T09:08:00"/>
<tblsensordata sensordata="62400909312" dtetme="2014-08-15T09:08:10"/>
<tblsensordata sensordata="62400909312" dtetme="2014-08-15T09:08:20"/>
<tblsensordata sensordata="63150637056" dtetme="2014-08-15T09:16:33"/>
<tblsensordata sensordata="65614413824" dtetme="2014-08-15T09:18:47"/>
<tblsensordata sensordata="65614413824" dtetme="2014-08-15T10:02:31"/>
<tblsensordata sensordata="65469915136" dtetme="2014-08-16T12:43:09"/>
<tblsensordata sensordata="65469886464" dtetme="2014-08-17T11:08:00"/>
<tblsensordata sensordata="65469886464" dtetme="2014-08-18T12:13:41"/>
<tblsensordata sensordata="65469132800" dtetme="2014-08-18T18:05:15"/>
<tblsensordata sensordata="65469132800" dtetme="2014-08-18T18:05:28"/>
<tblsensordata sensordata="65469132800" dtetme="2014-08-18T18:10:24"/>
<tblsensordata sensordata="65469104128" dtetme="2014-08-18T22:48:49"/>
<tblsensordata sensordata="65469104128" dtetme="2014-08-18T22:49:08"/>
<tblsensordata sensordata="65469104128" dtetme="2014-08-18T22:49:16"/>
</tblnodesensors>
</tbldashboardgroups>
这是通过以下javascript查询HighCharts调用的:
$.get('action-data.asp?action=96&gid=<%=(rsDashboardGroups.Fields.Item("id").Value)%>', function (xml) {
// Split the lines
var $xml = $(xml);
// push series
$xml.find('tblnodesensors').each(function(i, series) {
var seriesOptions = {
name: $(series).attr('deviceid'),
data: []
};
// push data points
$(series).find('tblsensordata').each(function (i, point) {
var dte = moment($(point).attr('dtetme')).unix();
// dump dte data out to the console for checking
console.log(dte);
seriesOptions.data.push(dte, parseInt($(point).attr('sensordata')))
});
options.series.push(seriesOptions);
});
var chart = new Highcharts.Chart(options);
});
我正在使用moment.js将日期格式化为unix时间戳,我理解这是HighCharts所需的正确日期格式,并通过输出到控制台,我得到以下日期/时间:
1408270084
所以这一切看起来都像预期的那样工作,但我得到的图表数据没有问题,如果我不包括dte
变量,一旦我把它添加到日期中,简单地显示为1.Jan 00:00:00.002 00:00:00.004 00:00:00.006 00:00:00.008 00:00:00.010
,任何人都能看到这里的问题是什么,现在已经在这里近8个小时了,开始麻木....: -)
我看到两个问题。首先也是最重要的:您使用push
添加两个新值,而不是[x,y]
对。我怀疑你要找的是(注意[
和]
):
seriesOptions.data.push([dte, parseInt($(point).attr('sensordata'))])
其次,您正在使用moment.unix()
,它返回UNIX时间戳。Highcharts使用以毫秒为单位的时间戳,因此请确保乘以1000。例如:
var dte = moment($(point).attr('dtetme')).unix() * 1000;
相关文章:
- JavaScript 时刻格式日期字符串
- 时刻.js转换 MM/dd/yyyy 格式日期
- JQGrid - 日期过滤器不适用于日期格式(日期(1453636335000))
- Jquery UI 日期选择器设置日期不适用于格式日期的动态更改
- 解析网页上的自由格式日期条目
- Javascript - 查找两个 MM-dd-yyyy HH:mm:ss 格式日期之间的秒数
- Javascript格式日期
- angularJs指令格式日期
- 如何解析 yyyy-MM-dd HH:mm:ss.javascript中的SSS格式日期
- JS原生格式日期方法
- JavaScript格式日期从DDMMYYYY到DD/MM/YYYY
- 不能转换成正确的格式日期&来自fullcalendar事件对象的小时
- 从unix - time格式日期为yyyy-mm-dd
- 如何在引导日历中将英语格式日期更改为西班牙语
- 使用包含英国格式日期的字符串设置new Date()
- 解析ISO-8601格式日期在ie9中不工作
- 格式日期从dd/MM/yyy hh: MM:ss到yyyy/MM/dd hh: MM:ss
- 如何获得正确的格式日期在前一个月与谷歌应用程序脚本
- Moment js格式日期与时区
- 格式日期&在kendo.ui.GridColumn