我想绘制具有趋势的google折线图,但是由于日期格式而导致类型不匹配。
下面是我的code.gs,它用于将日期值从第一列的电子表格中返回为字符串。
我试图在JS中放置新的Date()来绘制趋势线图,但是我不知道如何将此日期值放入数据表中。 在JS中,可以动态添加起作用的列。但是我无法解决日期问题,所以请帮忙。
Code.gs
function getSpreadsheetData() {
var ssID = "1994YM4uwB1mQORl-HLNk6o10-0ADLNQPgUxKGW6iW_8",
data = SpreadsheetApp.openById(ssID).getSheets()[0].getDataRange().getValues();
for(var i=1; i<data.length; i++){
var date = new Date(data[i][0]);
data[i][0] = Utilities.formatDate(date, "GMT+9", "M/dd");
}
return data;
}
JS
google.charts.load('current', {'packages':['corechart','controls']});
google.charts.setOnLoadCallback(getSpreadsheetData);
function getSpreadsheetData() {
google.script.run.withSuccessHandler(drawChart).getSpreadsheetData();
}
function drawChart(rows) {
var data = google.visualization.arrayToDataTable(rows, false);
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex'); // numbrer to date then error
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []}
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
}
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
dataTable: data,
options: {
explorer: { axis: 'horizontal' },
pointSize: 3,
vAxis : { format: '#.#',
viewWindow:{
max:0.6,
min:0
},
},
hAxis: {format: 'M/dd'},
legend: 'none',
chartArea: {width: '90%'},
crosshair: { trigger: 'both', orientation: 'both' },
trendlines: {
0: {
type: 'polynomial',
lineWidth: 5,
color: 'orange',
labelInLegend: 'Trend',
degree: 5,
visibleInLegend: true,
},
}
}
});
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'colFilter_div',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
filterColumnIndex: 1,
useFormattedValue: true,
ui: {
allowTyping: false,
allowMultiple: false, // when true then filters stacked
caption : 'Choose your values',
allowNone: true,
selectedValuesLayout: 'belowStacked'
}
},
state: initState
});
function setChartView () {
var state = columnFilter.getState();
var row;
var view = {
columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
view.columns.sort(function (a, b) {
return (a - b);
});
if (state.selectedValues.length > 0) {
chart.setView(view);
} else {
chart.setView(null);
}
chart.draw();
}
google.visualization.events.addListener(columnFilter, 'statechange', setChartView);
setChartView();
columnFilter.draw();
}
答案 0 :(得分:2)
您可以使用数据视图将日期字符串转换为实际日期。
在此处,正常创建数据表。
然后使用日期列的计算列创建数据视图。
假设数据表的第一列是日期字符串
function drawChart(rows) {
// create data table
var data = google.visualization.arrayToDataTable(rows, false);
// create data view
data = new google.visualization.DataView(data);
// create view columns with calculated column
var viewColumns = [{
calc: function (dt, row) {
return new Date(dt.getValue(row, 0));
},
label: data.getColumnLabel(0),
type: 'date'
}];
// add remaining columns
for (var = 1; i < data.getNumberOfColumns(); i++) {
viewColumns.push(i);
}
// set view columns
data.setColumns(viewColumns);
...