Как я могу явным образом определить тип данных столбца DataTable Google Charts после его создания?

Question

Я использую JQuery-CSV toArrays функции для заполнения визуализации Google DataTable, как это:

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 функции визуализации Google пытается автоматически определить соответствующий тип данных для каждого столбца, но с ошибкой первый столбец присваивает ему тип String вместо требуемого типа TimeOfDay.

Я знаю, что могу определить столбцы типа данных при заполнении вручную следующим образом:

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

Но я могу изменить тип данных столбца после того, как она уже была заселена arrayToDataTable функции?

EDIT:

Вот 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
и использовать DataView для преобразования первого столбца в '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>