Google apps script 谷歌应用程序脚本-可能的图表类型

我是谷歌应用程序脚本的新手，所以我只是在探索我想要实现的目标是否可行

从Google表单中，我需要检索并在单独的文档中显示根据每个表单提交的数据创建的图表。我知道这是可以做到的

我的问题是，我想要的图表类型似乎不可用

图表需要显示一个类别和两个值。这可以用一个条形图来完成，高度是一个值，颜色是另一个值-这看起来似乎是可能的，但我不确定整个条形图的颜色是否可以更改

---

另一种选择是气泡图，X轴表示类别，Y轴表示一个值，大小表示另一个值，但这种类型的图表似乎不受支持。

您可以在Google Apps脚本HTML服务中显示Google Visualization API提供的任何图表

下面是的修改版本。我们将从电子表格中提取数据，而不是固定数据。图表将显示在模式对话框中，作为该电子表格中的附加组件

源数据：

abcde
预期寿命生育率地区人口
CAN 80.66 1.67北美33739900
德国79.84 1.36欧洲81902307
DNK 78.6 1.84欧洲5523095
埃及Y 72.73 2.78中东79716203
GBR 80.05 2欧洲61801570
IRN 72.49 1.7中东73137148
IRQ 68.09 4.77中东31090763
ISR 81.55 2.96中东7485600
俄罗斯68.6 1.54欧洲141850000
美国78.09 2.05北美307007000

客户端 剩下的设计非常简单，但对于不习惯在HTML服务中使用javascript的应用程序脚本程序员来说，特别是异步函数调用和回调的行为，客户端代码中发生的事情才是最有趣的。下面是基本流程

• 显示带有占位符的html页面以进行可视化

• 加载外部JavaScript库。对于可视化对象，我们将使用jQuery（用于轻松操作DOM），当然还有Google的JavaScriptAPI，也称为

  jsapi

• 当页面加载时，请求回调。我们将调用它

  sendQuery（）

  ，因为它将检索电子表格数据。这是一种不同于仅显示图表的原始示例的方法，因为我们不仅仅使用硬编码数据

• 当jsapi完成加载时，将调用

  sendQuery（）

  。它请求我们的数据，并将异步响应传递给另一个回调，

  drawSeriesChart（）

• drawSeriesChart（）

  收到数据后，绘制图表

从电子表格检索数据的选项 由于我们的可视化将在浏览器（又名客户端）中运行，因此我们需要从电子表格（又名服务器端）中获取信息。根据您的具体需要，有几种方法可以检索该数据

通过可视化API进行查询

对于a，这是一种非常灵活的检索数据的方法。您的客户端js可以指定您感兴趣的数据范围，并且您可以利用来操作将显示的数据，而无需修改源电子表格

函数sendQuery（）{ var opts={sendMethod:'auto'}； var sheetId=“---您的工作表ID-”； var dataSourceUrl=https://spreadsheets.google.com/tq?key=%KEY%&pub=1' .替换（“%KEY%”，sheetId）； var query=new google.visualization.query（dataSourceUrl，opts）； //如果需要，指定查询字符串。 //使用回调函数发送查询。 查询发送（drawSeriesChart）； } 例如，在您不拥有源数据的情况下非常方便

创建一个web服务，该服务将提供电子表格数据。这种方法使电子表格本身保持私有

通过

google.script.run

在服务器端和客户端脚本之间使用直接通信。这样，电子表格仍然是私有的。这个示例非常简单，因为它收集了整个电子表格，但是您可以通过过滤、排序或添加更多元数据进行格式化来扩展它以操作数据

函数sendQuery（）{ //使用回调函数发送查询。 google.script.run .使用SuccessHandler（drawSeriesChart） .getSpreadsheetData（）； } 这要求在服务器端实现函数

getSpreadsheetData（）

，以返回所需的数据。这在下面的实际代码中显示

代码.gs 除了用于菜单创建的常用yada-yada之外，该文件实现了一个

getSpreadsheetData（）

函数，我们将使用该函数从工作表中检索所有数据

/**
*添加带有项目的自定义菜单以显示侧栏和对话框。
*
*@param{Object}是简单onOpen触发器的事件参数。
*/
功能开启（e）{
SpreadsheetApp.getUi（）
.createAddonMenu（）
.addItem（'气泡图示例'，'showBubbleEx'）
.addToUi（）；
}
/**
*安装加载项时运行；调用onOpen（）以确保菜单创建和
*立即完成任何其他初始化工作。
*
*@param{Object}是简单onInstall触发器的事件参数。
*/
函数onInstall（e）{
onOpen（e）；
}
/**
*打开用于可视化的对话框。
*/
函数showBubbleEx（）{
var ui=HtmlService.createTemplateFromFile（'BubbleEx'）
.评估（）
.setSandboxMode（HtmlService.SandboxMode.IFRAME）
.setWidth（450）
.设置高度（350）；
SpreadsheetApp.getUi（）.showModalDialog（ui，“气泡图示例”）；