Google Charts DataTable 列在创建后如何显式定义它的数据类型?
How may I explicitly define the datatype of a Google Charts DataTable column after it has been created?
我正在使用 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 文件的第一列包含用作图表水平轴的时间列表。
Google 可视化的 arrayToDataTable 函数尝试自动确定每一列的适当数据类型,但它失败了,第一列为其分配了字符串类型而不是所需的 TimeOfDay 类型。
我知道我可以像这样手动填充列数据类型:
var dt = new google.visualization.DataTable({
cols: [{id: 'time', label: 'Time', type: 'timeofday'},
{id: 'temp', label: 'Temperature', type: 'number'}],
...
但是我可以在列的数据类型已经被 arrayToDataTable 函数填充后更改它吗?
编辑:
这里有一个 CSV file 与我目前正在使用的相似。
当我按照下面的建议在创建 DataTable 之前将列标题更改为 object 符号并将其强制为 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);
});
}
谢谢!
在创建 DataTable
之前将列标题更改为 object 符号
并使用 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>
我正在使用 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 文件的第一列包含用作图表水平轴的时间列表。
Google 可视化的 arrayToDataTable 函数尝试自动确定每一列的适当数据类型,但它失败了,第一列为其分配了字符串类型而不是所需的 TimeOfDay 类型。
我知道我可以像这样手动填充列数据类型:
var dt = new google.visualization.DataTable({
cols: [{id: 'time', label: 'Time', type: 'timeofday'},
{id: 'temp', label: 'Temperature', type: 'number'}],
...
但是我可以在列的数据类型已经被 arrayToDataTable 函数填充后更改它吗?
编辑:
这里有一个 CSV file 与我目前正在使用的相似。
当我按照下面的建议在创建 DataTable 之前将列标题更改为 object 符号并将其强制为 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);
});
}
谢谢!
在创建 DataTable
之前将列标题更改为 object 符号
并使用 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>