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

Question

Я использую функцию jquery-csv toArrays для заполнения таблицы данных визуализации Google следующим образом:

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?

РЕДАКТИРОВАТЬ:

Вот файл CSV, похожий на тот, который я сейчас использую.

Когда я изменяю заголовок столбца на нотацию объекта перед созданием 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>