Wie kann ich den Datentyp einer Google Charts DataTable-Spalte nach der Erstellung explizit definieren?

Question

ich jquery-csv toArrays bin mit Funktion einer Google-Visualisierung Datatable wie diese zu bevölkern:

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]); 
... 

Die erste Spalte in der CSV-Datei, die eine Liste von Zeiten enthält, die als horizontale Achse für das Diagramm verwendet werden.

Die arrayToDataTable-Funktion von Google visualization versucht automatisch, den geeigneten Datentyp für jede Spalte zu ermitteln, schlägt jedoch fehl, wobei die erste Spalte den String-Typ anstelle des erforderlichen TimeOfDay-Typs angibt.

Ich weiß, ich kann einen Spalten-Datentyp bestimmen, wenn es manuell wie so bevölkern:

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

Aber kann ich eine Spalte Datentyp ändern, nachdem sie bereits von der arrayToDataTable Funktion bevölkert wurde?

EDIT:

Hier ist ein CSV file ähnlich denen, die ich zur Zeit verwenden.

Wenn ich die Spaltenüberschrift in die Objektnotation vor dem Erstellen der DataTable wie unten vorgeschlagen ändern und erzwinge TimeOfDay, wird die erste Spalte in eine Reihe von NaN konvertiert: NaN: NaN.NaN. Hier ist ein vereinfachtes Beispiel ähnlich dem in der vorgeschlagenen Antwort.

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); 
    }); 
} 

Vielen Dank!

Answer 1

Änderung der Spaltenüberschrift Notation Gegenstand vor dem DataTable
und verwenden eine Dataview Erstellen der ersten Spalte '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>

konvertiert