Question

我现在真的很难将这个项目运行到这个状态。一开始，我不知道如何从csv读取文件并将其推入数组。这现在可以正常工作，通过将日期值添加到行来与日期值不匹配。

我认为我的代码很简单并且显示了我的问题。我卡住了。

＆＃13;

<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);                
				elementArray.splice(elementArray.length ,1 ); 
                result.push(elementArray);
        }
		}
        callback(result);
    });
} 

CSVArray("data.csv", ";", function(result) {
		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' });
		
        dataTable.addRows(arrayResult);
	
        chart.draw(dataTable);
}
   
</script>
  </head>
  <body>
    <div id="timeline" style="height: 180px;"></div>
  </body>
</html>

＆＃13;

data.csv

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

我想我的问题是，数组包含所有数据为String而不是Object - 对吧？

错误码：

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

最好的问候保罗

Answer 1

你对这个问题是正确的，
您需要将字符串转换为实际日期

首先，建议将csv中的日期值更改为其他格式
在这里看到更多 - ＆gt; 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);
}

日期类型不符合谷歌图表要求

1 个答案: