我是 Google Apps 脚本的新手，所以我只是在探索我想要实现的目标是否可行。
我需要从 Google 表单中检索并在单独的文档中显示根据每个单独表单提交的数据创建的图表。我知道这是可以做到的。
我的问题是我想要的图表类型似乎不可用here。
图表需要显示一个类别和两个值。这可以通过条形图来完成，高度是一个值，颜色是另一个值 - 这看起来好像是可能的，但我不确定整个条形的颜色是否可以更改。
另一种方法是气泡图，X 轴表示类别，Y 轴表示一个值，大小表示另一个值 - 但似乎不支持这种类型的图表。
【问题讨论】：
标签： google-apps-script google-sheets google-visualization
您可以在 Google Apps 脚本 HTML 服务中显示由 Google Visualization API 提供的任何 25+ chart types。
以下是Bubble Chart example 的修改版本。我们将从电子表格中提取数据，而不是固定数据。该图表将显示在模式对话框中，作为该电子表格中的附加组件。
源数据：
A B C D E
ID Life Expectancy Fertility Rate Region Population
CAN 80.66 1.67 North America 33739900
DEU 79.84 1.36 Europe 81902307
DNK 78.6 1.84 Europe 5523095
EGY 72.73 2.78 Middle East 79716203
GBR 80.05 2 Europe 61801570
IRN 72.49 1.7 Middle East 73137148
IRQ 68.09 4.77 Middle East 31090763
ISR 81.55 2.96 Middle East 7485600
RUS 68.6 1.54 Europe 141850000
USA 78.09 2.05 North America 307007000
设计的其余部分非常简单，但是对于不习惯在 HTML 服务中使用 javascript 的 Apps 脚本程序员，尤其是异步函数调用和回调的行为，这就是客户端中发生的事情最有趣的辅助代码。这是基本流程。
显示带有占位符的 html 页面，用于可视化。
加载外部 JavaScript 库。我们将使用 jQuery（用于轻松操作 DOM），当然还有 Google 的 JavaScript API，也就是 jsapi，用于可视化对象。
当页面加载时，请求回调。我们称之为sendQuery()，因为它将检索我们的电子表格数据。 这与仅显示图表的原始示例不同，因为我们不只是使用硬编码数据。
当jsapi完成加载时，sendQuery()被调用。它请求我们的数据，并将异步响应传递给另一个回调，drawSeriesChart()。
drawSeriesChart() 收到数据后，绘制图表。
由于我们的可视化将在浏览器（也称为客户端）中运行，因此我们需要从电子表格（也称为服务器端）中获取信息。根据您的具体需求，有几种方法可以检索该数据。
通过可视化 API 查询。
对于published spreadsheet，这是一种非常灵活的数据检索方式。您的客户端 js 可以指定您感兴趣的数据范围，您可以利用Query Language 来操作您将显示的数据，而无需修改源电子表格。
function sendQuery() {
var opts = {sendMethod: 'auto'};
var sheetId = "--- your sheet ID ---";
var dataSourceUrl = 'https://spreadsheets.google.com/tq?key=%KEY%&pub=1'
.replace("%KEY%",sheetId);
var query = new google.visualization.Query(dataSourceUrl, opts);
// Specify query string, if desired.
// Send the query with a callback function.
query.send(drawSeriesChart);
}
适用于您不拥有源数据的情况，例如
创建将提供电子表格数据的 Web 服务。这种方法使电子表格本身保持私密。
使用服务器和客户端脚本之间的直接通信，通过google.script.run。这样，电子表格仍然是私密的。此示例非常简单，因为它收集了整个电子表格，但您可以扩展它以通过过滤、排序或添加更多元数据进行格式化来操作您的数据。
function sendQuery() {
// Send the query with a callback function.
google.script.run
.withSuccessHandler(drawSeriesChart)
.getSpreadsheetData();
}
这需要在服务器端实现函数getSpreadsheetData() 以返回所需的数据。这在后面的实际代码中显示。
除了通常用于创建菜单的 yada-yada 之外，此文件还实现了 getSpreadsheetData() 函数，我们将使用该函数从工作表中检索所有数据。
/**
* Adds a custom menu with items to show the sidebar and dialog.
*
* @param {Object} e The event parameter for a simple onOpen trigger.
*/
function onOpen(e) {
SpreadsheetApp.getUi()
.createAddonMenu()
.addItem('Bubble Chart Example', 'showBubbleEx')
.addToUi();
}
/**
* Runs when the add-on is installed; calls onOpen() to ensure menu creation and
* any other initializion work is done immediately.
*
* @param {Object} e The event parameter for a simple onInstall trigger.
*/
function onInstall(e) {
onOpen(e);
}
/**
* Opens a dialog for a visualization.
*/
function showBubbleEx() {
var ui = HtmlService.createTemplateFromFile('BubbleEx')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(450)
.setHeight(350);
SpreadsheetApp.getUi().showModalDialog(ui, "Bubble Chart Example");
}
/**
* Return all data from first spreadsheet as an array. Can be used
* via google.script.run to get data without requiring publication
* of spreadsheet.
*
* Returns null if spreadsheet does not contain more than one row.
*/
function getSpreadsheetData() {
var data = SpreadsheetApp.getActive().getSheets()[0].getDataRange().getValues();
return (data.length > 1) ? data : null;
}
这是改编自“Sheets 插件”模板，并引用其中包含的 Stylesheet.html 文件。
<!-- Use a templated HTML printing scriptlet to import common stylesheet. -->
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
<!-- Below is the HTML code that defines the dialog element structure. -->
<div>
<div id="series_chart_div" style="width: 400px; height: 300px;"></div>
<div class="block" id="dialog-button-bar">
<button id="dialog-cancel-button" onclick="google.script.host.close()">Cancel</button>
</div>
</div>
<!-- Use a templated HTML printing scriptlet to import JavaScript. -->
<?!= HtmlService.createHtmlOutputFromFile('BubbleExJavaScript').getContent(); ?>
<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>
// Load the Visualization API and desired package(s).
google.load('visualization', '1.0', {'packages':['corechart']});
/**
* Run initializations on dialog load.
*/
$(function() {
// Set a callback to run when the Google Visualization API is loaded.
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.
*/
function sendQuery() {
google.script.run
.withSuccessHandler(drawSeriesChart)
.getSpreadsheetData();
}
/**
* Callback function to generate visualization using data in response parameter.
*/
function drawSeriesChart(response) {
if (response == null) {
alert('Error: Invalid source data.')
return;
}
else {
var data = google.visualization.arrayToDataTable(response,false);
var options = {
title: 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
hAxis: {title: data.getColumnLabel(1)}, // 'Life Expectancy'
vAxis: {title: data.getColumnLabel(2)}, // 'Fertility Rate'
bubble: {textStyle: {fontSize: 11}}
};
var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
chart.draw(data, options);
}
}
</script>
【讨论】：