HighCharts日期格式

时间:2014-08-19 08:03:07

标签: javascript sql date highcharts

已开始使用HiagCharts从XML数据生成一些图表,但日期/时间根本不会呈现。

直接从&#FOR; FOR XML AUTO'生成的XML文件。 SQL Server 2012上的查询如下:

<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>

这是通过以下针对HighCharts的javascript查询调用的:

$.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个小时了,开始变得麻木....: - )

1 个答案:

答案 0 :(得分:1)

我看到两个问题。首先:您使用push添加两个新值,而不是[x,y] - 对。我怀疑你在寻找什么(注意[]):

seriesOptions.data.push([dte, parseInt($(point).attr('sensordata'))])

其次,您使用moment.unix()返回UNIX时间戳。 Highcharts使用以毫秒为单位的时间戳,因此请确保乘以1000.例如:

var dte = moment($(point).attr('dtetme')).unix() * 1000;