在谷歌网站中使用谷歌可视化 API答案

【问题标题】：Using Google Visualization API in google sites在谷歌网站中使用谷歌可视化 API
【发布时间】：2014-12-21 18:11:55
【问题描述】：

我是 JS 和 GAS 的新手，到目前为止管理得很好。但是，在将 HTML 与 JS 结合使用时，我迷失了方向。我想使用谷歌可视化 API 的时间线功能，并使用来自我想填充图表的站点或工作表的数据。

谷歌可视化 API >>HERE<<

使用 DoGet >>HERE<< 的 Google 图表服务

第二个链接显示了实现，看来我不能在我的网站上嵌入这些创建的图表？

如何将 HTML 服务与 JS 结合起来在 google 网站上显示时间线图？

【问题讨论】：

标签： google-apps-script google-visualization google-sites

【解决方案1】：

UI 服务仅在几天前于 2014 年 12 月 11 日被弃用

Google Documentation - UI Service

以下是您需要执行的操作的分步说明：

创建附加到您网站的 Apps 脚本

在您的 Google 网站中 - 点击带有齿轮图标的按钮
选择管理网站
点击应用脚本选择
点击添加新脚本按钮
选择 SCRIPT 作为 WEB APP

替换doGet()函数中的代码，如下所示：

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

保存。为项目命名。

创建 index.html 文件

选择 FILE、NEW、HTML 文件

在 HTML 文件中输入以下内容：

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["timeline"]});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
          [ 'Adams',      new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
          [ 'Jefferson',  new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline" style="width: 900px; height: 180px;"></div>
  </body>
</html>

保存新的 index.html 文件

发布您的 Apps 脚本

点击发布
单击部署为 Web 应用程序
如果没有版本，请保存新版本
点击底部的更新

将 Apps 脚本小工具添加到您的站点页面

返回您的网站页面。
点击带有铅笔图标的编辑页面按钮
点击插入菜单
选择应用程序脚本
选择脚本
点击选择按钮

保存所有更改。

你应该得到如下所示的东西：

现在您已经设置了.gs 代码和 HTML，您需要修改 HTML 文件的 SCRIPT 标记中的 JavaScript。

您需要运行google.script.run API 以触发.gs 文件中的另一个函数，该函数将发出并获取您的数据。

Google Documentation - Class google.script.run (Client-side API)

查看该文档，了解它的作用。

index.html 文件中的新代码如下所示：

<script>
  function onSuccess(importedData) {
    dataTable.addRows([importedData]);
    chart.draw(dataTable);
    alert('Your data has been loaded');
  }

  google.script.run.withSuccessHandler(onSuccess)
      .retrieveChartData();
</script>

硬编码的数据将被替换为代码。这是必须删除并更改为其他内容的硬编码数据：

    dataTable.addRows([
      [ 'Washington', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
      [ 'Adams',      new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
      [ 'Jefferson',  new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

您需要在.gs 脚本文件中添加另一个函数。像这样的：

function retrieveChartData() {
  Logger.log('I was called!');
  //Get the data from your data source
  Code here
  var tableData = code here;
  //return the data
  return tableData;
}

【讨论】：

当我抓取要传递给图表的数据时，是否需要为所有数据创建一个对象？这就是 dataTable.addRows 的样子。或者我可以将 .gs 文件中的变量传递给 html 文件吗？
查看onSuccess 函数。 onSuccess 函数自动接收从 google.script.run 调用的函数返回的任何内容。硬编码的数据不是对象，而是二维数组。您可以从retrieveChartData() 函数传递一个对象，但在onSuccess 函数中，您需要将数据重新格式化为二维数组。如果您遇到特定问题，只需发布另一个带有代码的问题，以及返回意外结果的行。使用Logger.log("Value is: " + variable); 语句并查看日志。