Google 表格 Apps 脚本基础知识 5：在幻灯片中绘制并呈现数据

1.简介

欢迎学习“使用 Google 表格的 Apps 脚本的基础知识”Codelab 播放列表的第五部分。此 Codelab 介绍如何使用 Apps 脚本中的电子表格服务绘制数据集图表。您还将学习如何使用幻灯片服务将图表导出到 Google 幻灯片中的新演示文稿。

学习内容

  • 如何使用 Apps 脚本构建折线图。
  • 如何将图表导出到新的幻灯片演示文稿。
  • 如何在 Google 表格中向用户显示对话框。

准备工作

这是“使用 Google 表格的 Apps 脚本的基础知识”播放列表中的第五个 Codelab。在开始此 Codelab 之前，请务必完成前面的 Codelab：

  1. 宏和自定义函数
  2. 电子表格、工作表和范围
  3. 处理数据
  4. 数据格式设置

所需条件

  • 了解此播放列表的前几个 Codelab 中介绍的关于 Apps 脚本的基本主题。
  • 基本熟悉 Apps 脚本编辑器
  • 基本熟悉 Google 表格
  • 能够读取 Google 表格 A1 表示法
  • 基本熟悉 JavaScript 及其 String 类

2. 设置

在继续操作之前，您需要一个包含一些数据的电子表格。和之前一样，我们提供了一个数据表，您可复制它来进行这些练习。请执行以下步骤：

  1. 点击此链接复制数据表，然后点击创建副本。新电子表格将放入您的 Google 云端硬盘文件夹，并命名为“日期和美元汇率的副本”。
  2. 点击电子表格标题，将其从“日期和美元汇率的副本”更改为“日期和美元汇率”。您的工作表应如下所示，并包含不同日期不同美元汇率的基本信息：

45a3e8814ecb07fc.png

  1. 如需打开脚本编辑器，请点击扩展 > Apps 脚本。

为了节省您的时间，我们提供了一些代码来在此电子表格中设置自定义菜单。打开电子表格副本后，您可能已经看到该菜单：

9b9caf6c1e9de34b.png

使用此电子表格和项目后，您就可以启动 Codelab 了。转到下一部分，开始了解图表和时间驱动的触发器。

3. 使用 Apps 脚本在 Google 表格中创建图表

假设您要设计一个特定图表来直观呈现数据集。实际上，您可以使用 Apps 脚本构建图表、修改图表并将图表插入 Google 表格。图表包含在电子表格中时称为嵌入式图表。

图表用于直观呈现一个或多个数据系列。对于嵌入式图表，它们显示的数据通常来自电子表格。通常情况下，更新电子表格中的数据也会使 Google 表格自动更新图表。

您可以使用 Apps 脚本从头开始创建自定义嵌入式图表，也可以更新现有图表。本部分介绍有关使用 Apps 脚本和 Spreadsheet 服务在 Google 表格中构建嵌入式图表的基础知识。

实现

在数据电子表格的副本中，“日期和汇率”数据集显示不同日期不同货币的汇率（1 美元）。您将实现一个 Apps 脚本函数，它用于绘制图表来直观呈现部分数据。

请执行以下步骤：

  1. 在 Apps 脚本编辑器中，将以下函数添加到脚本项目的 Code.gs 脚本末尾，也就是 onOpen() 函数之后：
/**  * Creates and inserts an embedded  * line chart into the active sheet.  */ function createEmbeddedLineChart() {   var sheet = SpreadsheetApp.getActiveSheet();   var chartDataRange = sheet.getRange(     'Dates and USD Exchange Rates dataset!A2:F102');   var hAxisOptions = {     slantedText: true,     slantedTextAngle: 60,     gridlines: {       count: 12     }   };      var lineChartBuilder = sheet.newChart().asLineChart();   var chart = lineChartBuilder     .addRange(chartDataRange)     .setPosition(5, 8, 0, 0)     .setTitle('USD Exchange rates')     .setNumHeaders(1)     .setLegendPosition(Charts.Position.RIGHT)     .setOption('hAxis', hAxisOptions)     .setOption("useFirstColumnAsDomain", true)     .build();     sheet.insertChart(chart);   }
  1. 保存脚本项目。

代码审核

您添加的代码实现了“日期和美元汇率”图表菜单项调用的函数，以创建基本折线图。我们来回顾一下代码。

前几行设置以下三个变量：

  • sheet：对当前活动工作表的引用。
  • chartDataRange：您要直观呈现的数据范围。代码使用 A1 表示法来指定范围涵盖名为日期和美元汇率数据集的工作表中的单元格 A2 到 F102。通过显式指定工作表，我们可以确保即使其他工作表处于活动状态，菜单项也仍然有效，因为范围始终覆盖数据位置。从第 2 行开始意味着我们将添加列标题，并且只会绘制最近 100 个日期（行）的图表。
  • hAxisOptions：一个基本 JavaScript 对象，包含代码用于配置横轴外观的一些设置信息。具体来说，他们以 60 度的水平轴设置横轴文本标签，并将垂直网格数量设置为 12。

下一行会创建一个“折线图构建器”对象。Apps 脚本中的嵌入式图表是使用构建器设计模式构建的。关于此设计模式的完整说明不在本 Codelab 的范围之内，因此现在只需知道 Spreadsheet 服务提供多个 EmbeddedChartBuilder 类。要创建图表，您的代码首先会创建一个嵌入式图表构建器对象，使用其方法定义图表设置，然后调用 build() 方法创建最终的 EmbeddedChart 对象。您的代码从未直接修改 EmbeddedChart 对象，因为所有图表配置都是通过构建器类进行管理的。

电子表格服务提供一个父 EmbeddedChartBuilder 类以及从它继承的多个子构建器类（例如 EmbeddedLineChartBuilder）。子类允许 Apps 脚本提供仅适用于特定图表类型的构建器图表配置方法。例如，EmbeddedPieChartBuilder 类提供了仅适用于饼图的 set3D() 方法。

在代码中，此代码会创建构建器对象变量 lineChartBuilder：

var lineChartBuilder = sheet.newChart().asLineChart();

代码会调用 Sheet.newChart() 方法来创建一个 EmbeddedChartBuilder 对象，然后使用 EmbeddedChartBuilder.asLineChart() 将构建器类型设置为 EmbeddedLineChartBuilder。

然后，代码使用 lineChartBuilder 构建图表。此代码的这一部分只是一系列定义图表设置的方法调用，后跟一个用于创建图表的 build() 调用。如前面的 Codelab 所述，代码使用方法链使代码易于阅读。以下是方法调用的作用：

最后，代码会调用 Sheet.insertChart(chart) 将构建的图表置于活动工作表中。

结果

您可以执行以下操作来查看格式设置函数的实际效果：

  1. 如果您尚未保存脚本项目，请在 Apps 脚本编辑器中进行保存。
  2. 点击显示数据集 > “日期和美元汇率数据集”图表菜单项。

您的脚本现在会在数据右侧放置一个新图表：

bbf856699b6d2b45.gif

恭喜，您已使用 Apps 脚本构建了嵌入式折线图。下一部分将向您介绍如何将图表导出到 Google 幻灯片。

4. 将图表导出到幻灯片

Apps 脚本的一大优势是可让您在两个 Google Workspace 应用之间轻松移动数据。其中大多数应用都具有专用的 Apps 脚本服务，类似于电子表格服务。例如，Gmail 提供了 Gmail 服务，Google 文档提供了文档服务，而 Google 幻灯片提供了幻灯片服务。通过所有这些内置服务，您可以从一个应用中提取数据、处理数据，然后将结果写入另一个应用。

在本部分中，您将学习如何将 Google 电子表格中的每个嵌入式图表导出到新的 Google 幻灯片演示文稿中。您还会看到两种方法用来在 Google 表格中显示用户自定义消息。

实现

您将实现通过演示数据集 > 将图表导出到幻灯片菜单项调用的函数。请执行以下步骤：

  1. 在 Apps 脚本编辑器中，将以下函数添加到脚本项目的 Code.gs 脚本末尾，也就是 createEmbeddedLineChart() 函数之后：
/**  * Create a Slides presentation and export  * all the embedded charts in this spreadsheet  * to it, one chart per slide.  */ function exportChartsToSlides() {   var ss = SpreadsheetApp.getActiveSpreadsheet();      // Fetch a list of all embedded charts in this   // spreadsheet.   var charts = [];   var sheets = ss.getSheets();   for (var i = 0; i < sheets.length; i++) {     charts = charts.concat(sheets[i].getCharts());   }      // If there aren't any charts, display a toast   // message and return without doing anything   // else.   if (charts.length == 0) {     ss.toast('No charts to export!');     return;   }      // Create a Slides presentation, removing the default   // title slide.   var presentationTitle =     ss.getName() + " Presentation";   var slides = SlidesApp.create(presentationTitle);   slides.getSlides()[0].remove();        // Add charts to the presentation, one chart per slide.   var position = {left: 40, top: 30};   var size = {height: 340, width: 430};   for (var i = 0; i < charts.length; i++) {     var newSlide = slides.appendSlide();     newSlide.insertSheetsChart(       charts[i],       position.left,       position.top,       size.width,       size.height);      }      // Create and display a dialog telling the user where to   // find the new presentation.   var slidesUrl = slides.getUrl();   var html = "<p>Find it in your home Drive folder:</p>"       + "<p><a href=\"" + slidesUrl + "\" target=\"_blank\">"       + presentationTitle + "</a></p>";      SpreadsheetApp.getUi().showModalDialog(     HtmlService.createHtmlOutput(html)       .setHeight(120)       .setWidth(350),       "Created a presentation!"   ); }
  1. 保存脚本项目。

代码审核

此代码可能比您预期的短。我们通过将代码分为 5 个部分来查看其行为：

1：获取图表

前几行搜索活动电子表格以查找所有嵌入式图表，从而将图表收集到数组 charts 中。这些行使用 Spreadsheet.getSheets() 方法和 Sheet.getCharts() 方法获取工作表和图表列表。JavaScript Array.concat() 方法用于将每个工作表中的图表列表附加到 charts 中。

2：检查是否有要导出的图表

该代码会检查是否有任何图表要导出。我们希望不要生成空白演示文稿，因此如果没有图表，代码会改为使用 Spreadsheet.toast(message) 创建 Toast 消息。这是一个小的“短暂”对话框，在 Google 表格的右下角弹出，持显示续几秒钟，然后消失：

db7e87dcb8010bef.gif

如果没有要导出的图表，代码将创建 Toast 消息并退出，而不执行任何其他操作。如果有要导出的图表，代码在接下来的几行中会继续创建演示文稿。

3：创建演示文稿

系统会创建变量 presentationTitle 以保存新演示文稿的文件名。它被设置为电子表格的名称，并在末尾连接“Presentation”。然后，代码会调用幻灯片服务方法 SlidesApp.create(name) 来创建演示文稿。

使用单个空白幻灯片创建新的演示文稿。我们不希望演示文稿中出现此情况，因此代码使用 Presentation.getSlides() 和 Slide.remove() 将其移除。

4：导出图表

在下一部分中，代码定义了 JavaScript 对象的 position 和 size，来设置导入的图表在幻灯片中的位置以及图表的大小（以像素为单位）。

代码会循环遍历图表列表中的每个图表。对于每个图表，系统会使用 Presentation.appendSlide() 创建 newSlide，将幻灯片添加到演示文稿的末尾。Slide.insertSheetsChart(sourceChart, left, top, width, height) 方法用于将图表与指定的 position 和 size 导入幻灯片。

5：共享演示文稿位置

最后，代码需要告知用户新演示文稿的位置，最好提供一个用户通过点击便可打开该演示文稿的链接。为此，代码会使用 Apps 脚本的 HTML 服务来创建一个自定义模态对话框。模态对话框（在 Apps 脚本中也称为自定义对话框）是指显示在 Google 表格界面上的窗口。自定义对话框显示时，用户将无法与 Google 表格互动。

要创建自定义对话框，代码需要可定义其内容的 HTML。这在 html 变量中提供。内容包括一个短段落和一个超链接。超链接是 presentationTitle 变量，链接到 Presentation.getUrl() 提供的演示文稿网址。超链接还使用 target="_blank" 属性，因此演示文稿将在新的浏览器标签页中打开，而不是在对话框中打开。

HTML 通过 HtmlService.createHtmlOutput(html) 方法解析为 HtmlOutput 对象。通过 HtmlOutput 对象，代码可使用 HtmlOutput.setHeight(height) 和 HtmlOutput.setWidth(width) 设置自定义对话框的大小。

创建 htmlOutput 后，代码会使用 Ui.showModalDialog(htmlOutput, title) 方法显示具有给定标题的对话框。

结果

现在您已经实现了第二个菜单项，您可以看到它的实际运行情况。如需测试 exportChartsToSlides() 函数，请执行以下操作：

  1. 如果您尚未保存脚本项目，请在 Apps 脚本编辑器中进行保存。
  2. 打开电子表格，然后点击显示数据集 > “日期和美元汇率”图表菜单项，创建要导出的图表。该图表将固定在活动表格中的单元格 H5 中。
  3. 点击显示数据集 > 将图表导出到幻灯片菜单项。系统可能会要求您重新授权脚本。
  4. 您应该会看到脚本处理请求并显示自定义对话框。
  5. 如需打开新的 Google 幻灯片演示文稿，请点击日期和美元汇率演示文稿链接：

51326ceaeb3e49b2.gif

如果您愿意，还可以向电子表格添加更多图表，然后重新选择菜单项以创建包含多张幻灯片的演示文稿。

现在，您可以将在 Google 表格中创建的图表导出到 Google 幻灯片演示文稿中。您还可以编写代码来创建自定义对话框。

您已完成此 Codelab 的最终练习。请转到下一部分，了解您学到的知识。

5. 总结

恭喜，您已完成此 Codelab，还学习了“使用 Google 表格的 Apps 脚本”Codelab 播放列表的所有基础知识。您可以使用此播放列表中介绍的原则来扩展您的 Google 表格体验，并探索 Apps 脚本的功能。

您觉得此 Codelab 对您有帮助吗？

是 否

您学到的内容

  • 如何使用 Apps 脚本构建嵌入式折线图。
  • 如何在 Google 表格中向用户显示 Toast 消息和自定义对话框。
  • 如何将图表导出到新的 Google 幻灯片演示文稿。

后续步骤

您已成功完成此播放列表。但是，您仍需要了解有关 Apps 脚本的更多信息。

访问以下资源：

祝您脚本编写愉快！

您觉得此 Codelab 播放列表对您有帮助吗？

是 否

您希望以后看到更多 Apps 脚本 Codelab 吗？

是 否