如何我可以明確地定義谷歌的圖表數據表列的數據類型已經創建後？

Question

我使用jquery-CSV toArrays起作用來填充一個谷歌的可視化數據表是這樣的：

function drawChart() { 
    // Load the CSV file into a string 
    $.get("Book1.csv", function(csvString) { 

    // transform the CSV string into a 2-dimensional array 
    var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}); 

    // Create new DataTable object from 2D array 
    var data = new google.visualization.arrayToDataTable(arrayData); 

    // Set which columns we will be using 
    var view = new google.visualization.DataView(data); 
    view.setColumns([0,1,5,9,13,17,21,25,29]); 
... 

在CSV文件中的第一列包含的其用作圖表的水平軸時間的列表。

谷歌可視化的功能arrayToDataTable嘗試自動確定用於每一列中的相應的數據類型，但它失敗，並在第一列中的所需的TimeOfDay類型的分配給它的字符串類型來代替。

我知道我可以手動確定列的數據類型填充時，它就像這樣：

var dt = new google.visualization.DataTable({ 
    cols: [{id: 'time', label: 'Time', type: 'timeofday'}, 
      {id: 'temp', label: 'Temperature', type: 'number'}], 
... 

但我可以改變一個字段的數據類型它已經被arrayToDataTable功能填充後？

編輯：

這裏是類似於那些我目前使用CSV file。

當我在創建DataTable之前將列標題更改爲對象表示法並將其強制爲TimeOfDay時，第一列將轉換爲一系列NaN：NaN：NaN.NaN。這裏是一個簡單的例子，類似於建議的答案。

google.load('visualization', '1', {packages: ['controls', 'charteditor']}); 
google.setOnLoadCallback(drawChart); 

function drawChart() { 
    // Load the CSV file into a string 
    $.get("Book1.csv", function(csvString) { 

    // transform the CSV string into a 2-dimensional array 
    var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}); 

    // Create new DataTable object from 2D array 
    var data = new google.visualization.arrayToDataTable(arrayData); 

    // Show datatable in grid to see what is happening before the data type change 
    var chart1 = new google.visualization.Table(document.getElementById('chart_div0')); 
    chart1.draw(data);  

    // Here we explicitly define type of first column in table 
    arrayData[0][0] = {type: 'timeofday', label: arrayData[0][0]}; 

    // Create new DataTable object from 2D array 
    var data = new google.visualization.arrayToDataTable(arrayData); 

    // Show datatable in grid to see what is happening after the data type change 
    var chart2 = new google.visualization.Table(document.getElementById('chart_div1')); 
    chart2.draw(data); 
    }); 
} 

謝謝！

Answer 1

變化的列標題創建DataTable
之前對象標記和使用數據視圖的第一列轉換爲'timeofday'

google.charts.load('current', { 
 
    callback: function() { 
 
    csvString = 'TIME,TEMP0,HUM0\n12:00:04 AM,24.7,50\n12:01:05 AM,24.7,50'; 
 
    var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}); 
 

 
    var data = new google.visualization.arrayToDataTable(arrayData); 
 
    
 
    var columns = []; 
 
    for (var i = 0; i < data.getNumberOfColumns(); i++) { 
 
     columns.push(i); 
 
    } 
 
    
 
    var view = new google.visualization.DataView(data); 
 
    columns[0] = { 
 
     calc: function(dt, row) { 
 
     var thisDate = new Date('1/1/2016 ' + dt.getValue(row, 0)); 
 
     return [thisDate.getHours(), thisDate.getMinutes(), thisDate.getSeconds(), thisDate.getMilliseconds()]; 
 
     }, 
 
     label: arrayData[0][0], 
 
     type: 'timeofday' 
 
    }; 
 
    view.setColumns(columns); 
 

 
    var chart = new google.visualization.Table(document.getElementById('chart_div')); 
 
    chart.draw(view); 
 
    }, 
 
    packages: ['corechart', 'table'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script> 
 
<div id="chart_div"></div>