如何在创建Google Charts DataTable列后明确定义数据类型？ [英] How may I explicitly define the datatype of a Google Charts DataTable column after it has been created?

问题描述

 函数drawChart（）{
 //将CSV文件加载到字符串
 $ .get（Book1.csv，function（csvString）{
 
 //将CSV字符串转换为二维数组
 var arrayData = $ .csv.toArrays（csvString，{onParseValue：$ .csv.hooks.castToScalar}）; 
 
 //从2D数组创建新的DataTable对象
 var data = new google.visualization.arrayToDataTable（arrayData）; 
 
 //设置我们将要使用的列
 var view = new google.visualization.DataView（data）; 
 view.setColumns（[0,1,5,9,13,17,21,25,29]）; 
 ... 
  

CSV文件中的第一列包含一个用作图表横轴的时间列表。

Google可视化的arrayToDataTable函数会尝试自动为每个列确定适当的数据类型，但它是fa ils第一列将它指定为字符串类型，而不是所需的TimeOfDay类型。

我知道我可以在手动填充它时确定列数据类型，如下所示：

  var dt = new google.visualization.DataTable（{
 cols：[{id：'time'，label：'Time '，输入：'timeofday'}，
 {id：'temp'，label：'Temperature'，输入：'number'}]，
 ... 
  

但是，在已经由arrayToDataTable函数填充之后，我可以更改列的数据类型吗？

编辑：

这是 CSV文件类似于我目前使用的。

当我将列标题更改为对象表示法在按照下面的建议创建DataTable并将其强制为TimeOfDay之前，第一列将被转换为一系列NaN：楠：NaN.NaN。这是一个简单的例子，类似于建议的答案。

{packages：['controls'，'charteditor']}）;
google.setOnLoadCallback（drawChart）;

函数drawChart（）{
//将CSV文件加载到字符串
$ .get（Book1.csv，function（csvString）{

//将CSV字符串转换为二维数组
var arrayData = $ .csv.toArrays（csvString，{onParseValue：$ .csv.hooks.castToScalar}）;

//从二维数组创建新的DataTable对象
var data = new google.visualization.arrayToDataTable（arrayData）;

//在数据类型中显示数据表达式以查看数据类型之前发生了什么更改
var chart1 = new google.visualization.Table（document.getElementById（'chart_div0'））;
chart1.draw（data）;

//这里我们明确地定义第一列的类型为
arrayData [0] [0] = {type：'timeofday'，label：arrayData [0] [0]};

//创建新的DataTable对象从二维数组
var data = new google.visualization.arrayToDataTable（arrayData）;

//在网格中显示数据表以查看发生了什么g数据类型更改
var chart2 = new google.visualization.Table（document.getElementById（'chart_div1'））;
chart2.draw（data）;
}）;

谢谢！

解决方案

在创建 DataTable

之前将列标题更改为对象表示法，并使用DataView将第一个栏到'timeofday'

  google.charts.load（'current'，{callback：function（）{csvString ='TIME，TEMP0，HUM0 \\\
12：00：04 AM，24.7,50 \\\
12：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，r ow）{var thisDate = new Date（'1/1/2016'+ dt.getValue（row，0））;返回[thisDate.getHours（），thisDate.getMinutes（），thisDate.getSeconds（），thisDate.getMilliseconds（）]; }，label：arrayData [0] [0]，类型：'timeofday'}; view.setColumns（列）; var chart = new google.visualization.Table（document.getElementById（'chart_div'））; chart.draw（视图）; }，packages：['corechart'，'table']}）; <$ $ c> 

 < 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>  

I am using jquery-csv toArrays function to populate a google visualization DataTable like this:

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

The first column in the CSV file contains a list of times which are used as the horizontal axis for the chart.

Google visualization's arrayToDataTable function attempts to automatically determine the appropriate data type for each column but it fails with the first column assigning it the String type instead of the required TimeOfDay type.

I know I can determine a columns datatype when populating it manually like so:

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

But can I change a column's data type after it has already been populated by the arrayToDataTable function?

EDIT:

Here is a CSV file similar to those which I'm currently using.

When I change the column heading to object notation before creating the DataTable as suggested below and force it to TimeOfDay, the first column gets converted to a series of NaN:NaN:NaN.NaN. Here is a simplified example similar to the one in the suggested answer.

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

Thanks!

解决方案

change the column heading to object notation before creating the DataTable
and use a DataView to convert the first column to '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>

这篇关于如何在创建Google Charts DataTable列后明确定义数据类型？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！