【发布时间】：2017-07-09 16:11:08
【问题描述】：
所以我整天都在试验 Google Apps Script 和 Charts API，但很遗憾，一无所获。
我做了很多事情 - 包括遵循 Mogsdad 精心编写的教程 here。这是我到目前为止的代码 - 包括该教程中的代码，但我不断收到错误消息，指出脚本已完成但返回的类型与接受的类型不同，或类似的东西。
仪表板代码.gs：
/**
* Serves HTML of the application for HTTP GET requests.
* From gist.github.com/mogsdad/24518dff348ad14d3929
*
* @param {Object} e event parameter that can contain information
* about any URL parameters provided.
*/
function doGet(e) {
var template = HtmlService.createTemplateFromFile('Index');
// Build and return HTML in IFRAME sandbox mode.
return template.evaluate()
.setTitle('Dashboard demo')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
/**
* Return all data from first spreadsheet as an array. Can be used
* via google.script.run to get data without requiring publication
* of spreadsheet.
* From gist.github.com/mogsdad/24518dff348ad14d3929
*
* Returns null if spreadsheet does not contain more than one row.
*/
function getSpreadsheetData() {
// This does not work, see https://code.google.com/p/google-apps-script-issues/issues/detail?id=5233
// var ss = SpreadsheetApp.getActiveSpreadsheet();
// var data = ss.getSheets()[0].getDataRange().getValues();
var sheetId = '1-EE_WDD6QYi257_utUf_D0v5e9Gf8Lj5tETPqqllvxk'; // Replace with your spreadsheet ID. (Ick.)
var data = SpreadsheetApp.openById(sheetId).getSheets()[0].getDataRange().getValues();
return (data.length > 1) ? data : null;
}
索引.html：
<!-- Use a templated HTML printing scriptlet to import common
stylesheet. -->
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
<html>
<body>
<h1 id="main-heading">Loading...</h1>
<div id="dashboard-div">
<div id="control-div">
<div id="selector-div">
</div>
<div id="selector1-div">
</div>
</div>
<div id="charts-div">
<div id="table-div">
</div>
</div>
</div>
<div class="hidden" id="error-message">
</div>
</body>
</html>
<!-- Store data passed to template here, so it is available to the
imported JavaScript. -->
<script>
</script>
<!-- Use a templated HTML printing scriptlet to import JavaScript. -->
<?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>
和 JavaScript.html（我决定坚持 Mogsdad 所说的）：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('45', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
</script>
<script>
// Load the Visualization API and desired package(s).
google.load('visualization', '1.0', {'packages':['controls']});
/**
* Run initializations on dialog load.
*/
$(function() {
// Set a callback to run when the Google Visualization API is loaded.
// Note: could also be accomplished via google.load options.
google.setOnLoadCallback(sendQuery);
// Assign handler functions to dialog elements here, if needed.
// Call the server here to retrieve any information needed to build
// the dialog, if necessary.
});
/**
* Issue asynchronous request for spreadsheet data.
* From gist.github.com/mogsdad/60dcc4116ed74fceb5f9
*/
function sendQuery() {
google.script.run
.withSuccessHandler(drawDashboard)
.withFailureHandler(function(msg) {
// Respond to failure conditions here.
$('#main-heading').text(msg);
$('#main-heading').addClass("error");
$('#error-message').show();
})
.getSpreadsheetData();
}
/**
* Callback function to generate visualization using data in response parameter.
* From gist.github.com/mogsdad/60dcc4116ed74fceb5f9
*
* @param {Object[][]} Two-Dim array of visualization data
*/
function drawDashboard(response) {
$('#main-heading').addClass("hidden");
if (response == null) {
alert('Error: Invalid source data.')
return;
}
else {
// Transmogrify spreadsheet contents (array) to a DataTable object
var data = google.visualization.arrayToDataTable(response,false);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard-div'));
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table-div'
});
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'selector-div',
'options': {
'filterColumnLabel': 'Category'
}
});
var subCategoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'selector1-div',
'options': {
'filterColumnLabel': 'Category'
}
});
// Set up dependencies between controls and charts
dashboard.bind([categoryPicker,subCategoryPicker], table);
// Draw all visualization components of the dashboard
dashboard.draw(data);
}
}
</script>
我不需要数值过滤器，我只需要类似于级联下拉列表 + 表格的东西。
我将不胜感激任何指针。我哪里错了？我不认为问题出在 JS.html 文件中 - 这可能与从 Google 表格中获取数据有关。
【问题讨论】：
标签： javascript charts google-apps-script google-sheets google-visualization