Google Charts DataTableの作成後にそのデータ型を明示的に定義するにはどうすればよいですか？私はjqueryの-CSV toArraysは、このようなGoogleの可視化のDataTableに移入するように機能し使用しています

Question

：

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ファイルの最初の列には、チャートの横軸として使用されている時刻のリストが含まれています。

Google視覚化のarrayToDataTable関数は、各列の適切なデータ型を自動的に決定しようとしますが、最初の列では必要なTimeOfDay型の代わりにString型を割り当てて失敗します。

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
を作成する前に、表記法オブジェクトと'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>

に最初の列に変換するデータビューを使用する列見出し