2017-08-15 39 views
0

現在真的很難讓我把這個項目運行到這個狀態。 在開始時,我不知道如何從csv讀取文件並將其推送到數組中。這現在可以正常工作,通過將日期值添加到行中來匹配日期值。日期類型不符合谷歌圖表要求

我想我的代碼很簡單,並顯示我的問題。 Im卡住了。

<html> 
 
    <head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script src="jquery.csv.js"></script> 
 

 
<script type="text/javascript"> 
 

 
    google.charts.load('current', {'packages':['timeline']}); 
 
    google.charts.setOnLoadCallback(drawChart); 
 
    
 
function CSVArray(fileName, separator, callback) { 
 
    
 
    $.get(fileName, function(fileContent){ 
 
     
 
     var result = [];   
 
     var textArray = fileContent.split(/(\r\n|\n|\r)/gm);   
 
     for (var i = 0; i < textArray.length; i++) {    
 
      if (textArray[i].length > 1) {     
 
       var elementArray = textArray[i].split(separator);     
 
\t \t \t \t elementArray.splice(elementArray.length ,1); 
 
       result.push(elementArray); 
 
     } 
 
\t \t } 
 
     callback(result); 
 
    }); 
 
} 
 

 
CSVArray("data.csv", ";", function(result) { 
 
\t \t arrayResult = result; 
 
}); 
 

 
     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: 'Job'}) 
 
     dataTable.addColumn({ type: 'string', id: 'Status' }); 
 
     dataTable.addColumn({ type: 'date', id: 'Start' }); 
 
     dataTable.addColumn({ type: 'date', id: 'End' }); 
 
\t \t 
 
     dataTable.addRows(arrayResult); 
 
\t 
 
     chart.draw(dataTable); 
 
} 
 
    
 
</script> 
 
    </head> 
 
    <body> 
 
    <div id="timeline" style="height: 180px;"></div> 
 
    </body> 
 
</html>

data.csv

'ZS142770-Win Dateien DD---BtD Woche';'passed';new Date(2014, 10, 15);new Date(2014, 10, 15) 

我想我的問題是,該數組包含所有數據作爲字符串而不是作爲對象 - 對嗎?

錯誤碼:

Error: Type mismatch. Value new Date(2014, 10, 15) does not match type date in column index 2 

問候 保羅

回答

1

一下你對這個問題的正確,
您需要將字符串轉換成真正的約會

第一,建議將csv中的日期值更改爲其他格式
在此處查看更多信息 - >Converting string to date in js

,那麼你可以創建一個從字符串,如日期...

elementArray[2] = new Date(elementArray[2]); 

,但如果你不能在CSV更改值,
您可以嘗試使用eval,這是相當很多從不建議
(但它應該工作)

elementArray[2] = eval(elementArray[2]); 

下一個,你可以有一些時間問題與您的代碼的佈局,
建議等待谷歌加載,加載CSV
然後繪製圖表之前...

建議設置類似於以下...

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

function getData() { 
    $.get("data.csv", function (fileContent) { 
    var result = []; 
    var textArray = fileContent.split(/(\r\n|\n|\r)/gm); 
    for (var i = 0; i < textArray.length; i++) { 
     if (textArray[i].length > 1) { 
     var elementArray = textArray[i].split(";"); 
     // convert date 
     elementArray[2] = eval(elementArray[2]); 
     elementArray[3] = eval(elementArray[3]); 

     // or with different format 
     elementArray[2] = new Date(elementArray[2]); 
     elementArray[3] = new Date(elementArray[3]); 

     result.push(elementArray); 
     } 
    } 
    drawChart(result); 
    }); 
} 

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

    dataTable.addColumn({ type: 'string', id: 'Job'}) 
    dataTable.addColumn({ type: 'string', id: 'Status' }); 
    dataTable.addColumn({ type: 'date', id: 'Start' }); 
    dataTable.addColumn({ type: 'date', id: 'End' }); 
    dataTable.addRows(arrayResult); 

    chart.draw(dataTable); 
} 
+0

謝謝:)但是另外一個問題,我回來了我不能修復 - Dygraph.TICK_PLACEMENT [a]是未定義的 - 擴展圖不會爲我工作。我會用chrome瀏覽器在家看看。很多人都說,firefox導致這個問題:) –

+0

對不起!像鉻上的魅力一樣工作:)謝謝! –