時間軸圖表錯誤：<text>屬性x：期望長度，「NaN」

第三天我試圖從谷歌時間表圖表中獲取json的數據，沒有錯誤。我認爲它應該工作，但我有一個錯誤<text> attribute x: Expected length, "NaN".時間軸圖表錯誤：<text>屬性x：期望長度，「NaN」

有一個問題部分<g><text text-anchor="middle" x="NaN" y="21.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#000000"> </text></g>

還有就是我的圖表與AJAX調用數據：

var data = []; 
     $.ajax({ 
      url: "/api/reports/6/linestatus", 
      dataType: "json", 
      success: function (jsonData) { 
       for (var i = 0; i < jsonData.length; i++) { 
        startTime = new Date(jsonData[i].dateStart); 
        startHours = startTime.getHours(); 
        startMinutes = startTime.getMinutes(); 
        startSeconds = startTime.getSeconds(); 

        endTime = new Date(jsonData[i].dateEnd); 
        endHours = endTime.getHours(); 
        endMinutes = endTime.getMinutes(); 
        endSeconds = endTime.getSeconds(); 
        console.log(data); 
        data.push(
         [jsonData[i].lineName.toString(), jsonData[i].status.toString(), new Date(0, 0, 0, startHours, startMinutes, startSeconds), new Date(0, 0, 0, endHours, endMinutes, endSeconds)] 
       ); 

       } 
      } 
     }) 

     dataTable.addRows(data);

我的JSON數據：

[{ 
    "lineId": 6, 
    "lineName": "Line 1", 
    "status": 2, 
    "dateStart": "2017-08-03T15:10:20.42", 
    "dateEnd": "2017-08-03T15:10:23.353" 
}]

很抱歉代碼很多。 = \ 謝謝。

來源

2017-08-03 ddd.foster

你爲什麼要修改的日期 - >'新的日期（0，0，0，startHours，startMinutes，startSeconds） ' - 爲什麼不使用'startTime'？ – WhiteHat

我需要hh：mm：ss只有 –

@WhiteHat，是的，我試過使用完整日期。仍是同樣的問題。 –

兩件事情在評論

（1）在循環中的語法無效
什麼都沒有與陣列

for (var i = 0; i < 2; i++){ 
    [ 'Washington', new Date(), new Date() ], // <-- ?? 
}

需要進行使用addRow，什麼

for (var i = 0; i < 2; i++){ 
    dataTable.addRow([ 'Washington', new Date(), new Date() ]); 
}

（2）它可能是一個錯誤，但如果所有的行都有相同的開始和結束日期，
圖表將拋出一個錯誤

// dates have close if not equal times 
    dataTable.addRow([ 'Washington', new Date(), new Date() ]);

看到下面的工作片段，
添加addRow和修改的開始日期...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['timeline'] 
 
}); 
 

 
function drawChart() { 
 
    var container = document.getElementById('timeline'); 
 
    var chart = new google.visualization.Timeline(container); 
 
    var dataTable = new google.visualization.DataTable(); 
 

 
    dataTable.addColumn({ type: 'string', id: 'President' }); 
 
    dataTable.addColumn({ type: 'date', id: 'Start' }); 
 
    dataTable.addColumn({ type: 'date', id: 'End' }); 
 

 
    for (var i = 0; i < 2; i++) { 
 
    dataTable.addRow([ 
 
     'row ' + (i + 1), 
 
     new Date((new Date()).getTime() - ((i + 1) * 24 * 60 * 60 * 1000)), 
 
     new Date() 
 
    ]); 
 
    } 
 

 
    chart.draw(dataTable); 
 
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="timeline" style="height: 180px;"></div>

編輯
這裏是一個工作示例使用類似的數據...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['timeline'] 
 
}); 
 

 
function drawChart() { 
 
    var jsonData = [{ 
 
    "lineId": 1, 
 
    "lineName": "Line 1", 
 
    "status": 1, 
 
    "dateStart": "2017-08-03T15:10:20.42", 
 
    "dateEnd": "2017-08-03T15:10:23.353" 
 
    }, { 
 
    "lineId": 2, 
 
    "lineName": "Line 2", 
 
    "status": 2, 
 
    "dateStart": "2017-08-03T15:10:30.42", 
 
    "dateEnd": "2017-08-03T15:10:33.353" 
 
    }, { 
 
    "lineId": 3, 
 
    "lineName": "Line 3", 
 
    "status": 3, 
 
    "dateStart": "2017-08-03T15:10:40.42", 
 
    "dateEnd": "2017-08-03T15:10:43.353" 
 
    }, { 
 
    "lineId": 4, 
 
    "lineName": "Line 4", 
 
    "status": 4, 
 
    "dateStart": "2017-08-03T15:10:50.42", 
 
    "dateEnd": "2017-08-03T15:10:53.353" 
 
    }]; 
 
    var container = document.getElementById('chart'); 
 
    var chart = new google.visualization.Timeline(container); 
 
    var dataTable = new google.visualization.DataTable(); 
 

 
    dataTable.addColumn({type: 'string', id: 'row'}); 
 
    dataTable.addColumn({type: 'string', id: 'bar'}); 
 
    dataTable.addColumn({type: 'date', id: 'start'}); 
 
    dataTable.addColumn({type: 'date', id: 'end'}); 
 

 
    for (var i = 0; i < jsonData.length; i++) { 
 
    dataTable.addRow(
 
     [jsonData[i].lineName.toString(), jsonData[i].status.toString(), new Date(jsonData[i].dateStart), new Date(jsonData[i].dateEnd)] 
 
    ); 
 
    } 
 

 
    chart.draw(dataTable); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart"></div>

來源

2017-08-04 11:35:31 WhiteHat

謝謝你試圖幫助我。這工作，但正如我以前所說，這個循環仍然不起作用阿賈克斯呼籲 –

看到__EDIT__以上 – WhiteHat

我在想你的問題可能與時機 - ajax調用是默認異步，在您發佈的問題中的代碼，'dataTable.addRows（data）;'將在它完成之前的ajax之前運行... – WhiteHat

<g><text text-anchor="middle" x="NaN" y="21.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#000000"> </text></g>

x="NaN"將「NaN」更改爲數字。

來源

2017-08-03 20:45:25

感謝回覆。不幸的是，我無法改變它。 for循環中的問題。如果我把靜態數據放在循環外面，圖表工作正常並且呈現，但是如果使用.push或.addRows（[[...]]）在循環中，我有一個錯誤。 –

將for循環添加到問題呢？ @ ddd.foster，當你這樣做的時候提及我我知道你已經改變了它 –

我已經編輯了問題，並在發佈後添加了幾分鐘。對不起 –

主要問題是內循環。

$.ajax({ 
      url: "url", 
      dataType: "json", 
      success: function (jsonData) { 
       for (var i = 0; i < jsonData.length; i++) { 
        data.push(
         [['text', 'text', new Date(), new Date()]] 
       ); 
       } 
      } 
     })

如果在循環中使用data.push（）或addRows（），則不起作用。但是如果我把靜態數據放在循環之外，它就可以工作。從小提琴

來源

2017-08-04 09:54:46

時間軸圖表錯誤：<text>屬性x：期望長度，「NaN」

回答

相關問題