HighCharts日期格式

HighCharts Date Formatting

本文关键字:格式 日期 HighCharts      更新时间:2023-09-26

已经开始使用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;