创建 Google Charts DataTable 列后，如何显式定义其数据类型？答案

【问题标题】：How may I explicitly define the datatype of a Google Charts DataTable column after it has been created?创建 Google Charts DataTable 列后，如何显式定义其数据类型？
【发布时间】：2016-07-22 04:01:17
【问题描述】：

我正在使用 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 文件的第一列包含时间列表，用作图表的水平轴。

Google 可视化的 arrayToDataTable 函数尝试为每一列自动确定适当的数据类型，但它失败了，第一列为其分配了 String 类型而不是所需的 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);
    });
 }

谢谢！

【问题讨论】：

标签： google-visualization jquery-csv timeofday

【解决方案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>

【讨论】：