為什么我的HighCharts圖表無法呈現？

Question

我正在嘗試繪制圖表以使用高圖顯示時間與溫度的關系。

我有三個傳感器，每5分鍾記錄一次數據（我相信在JS中為5 * 60）。

由於某些原因，它不會為x軸或圖形上的任何數據繪制比例。 但是，圖形的准系統和y軸比例尺效果很好。

我也在控制台中收到以下錯誤：

Error: Invalid value for <circle> attribute cx="NaN"

如果您可以通過我的圖表代碼發現任何缺失或不正確的地方，那將是很好的。

我的代碼在下面-我在任何外部引用中都進行了注釋（它們來自JSON數據源，並且檢查了它們通過時是否均為有效數據）。

tempChart = new Highcharts.Chart({
        chart: {
            renderTo:'tempChart', // just a div with id of tempChart
            zoomType:'x',
            type:'line'
        },
        title: {
            text: 'Server Temperature'
        },
        xAxis: {
            type: 'datetime',
            maxZoom: 5*60*1000, // limit zoom to one record (5 minutes)
            title: {
                text: 'Timestamp'
            }
        },
        yAxis: {
            title: {
                text: 'Temperature'
            },
        },
        tooltip: {
            shared: true                    
        },
        series:[{
            type: 'line',
            name: 'Sensor 1',
            pointInterval:5*60*1000,
            pointStart:startDate, // this is a js date object
            data:data.temp1 // this is a javascript array object
        }, {
            type: 'line',
            name: 'Sensor 2',
            pointInterval:5*60*1000,
            pointStart:startDate, // same js date object
            data:data.temp2 // javascript array object
        }, {
            type: 'line',
            name: 'Sensor 3',
            pointInterval:5*60*1000,
            pointStart:startDate, // same
            data:data.temp3 // javascript array object
        }]
    });

---

更新

我通過使用以下函數將MySQL日期轉換為JS日期來構造日期（ 源 ）

function sql2js(timestamp) {
    var regex=/^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9]) (?:([0-2][0-9]):([0-5][0-9]):([0-5][0-9]))?$/;
    var parts=timestamp.replace(regex,"$1 $2 $3 $4 $5 $6").split(' ');
    return new Date(parts[0],parts[1]-1,parts[2],parts[3],parts[4],parts[5]);
}

因此，在創建圖表的函數開始時，我在JSON日期從JSON數據中使用該函數，如下所示：

startDate = sql2js(data.startDate);

為了確保日期正確，我將它們都記錄了下來：

MySQL date: 2012-01-03 17:05:01
JS date:    Tue Jan 03 2012 17:05:01 GMT+0000 (GMT)

Answer 1

您如何構造Date對象？

我在JSFiddle上處理了您的示例，發現如果對日期對象進行了錯誤的聲明（例如， var startDate = new Date() ），則會遇到與您提到的相同的錯誤。

但是使用適當的Date對象，一切正常

編輯：

實際上，HighCharts要求提供毫秒級的UTC日期，因此您必須

var startDate = sql2js('2012-01-03 17:05:01').getUTCMilliseconds();

如JSFiddle中所更新