如何我可以明确地定义谷歌的图表数据表列的数据类型已经创建后？

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>