在网站中嵌入 Google Charts 仪表板答案

【问题标题】：Embedding Google Charts dashboard in website在网站中嵌入 Google Charts 仪表板
【发布时间】：2014-04-04 09:37:32
【问题描述】：

我使用 Google Script 创建了一个 Google Charts 仪表板，当我将其部署为 Web 应用程序时，它运行良好。我想知道是否有办法将仪表板嵌入到 HTML 页面中？我尝试使用 HTML 服务而不是 UI 服务，但它没有显示仪表板，它只是显示“UIApplication”。下面是仪表板和 HTML 页面的代码。

谷歌脚本中的仪表板

function doGet() {

    return HtmlService
      .createTemplateFromFile('index')
      .evaluate();
} 

function createDashboard() {

 var ss = SpreadsheetApp.openById('0Ar1JYhAF9RNsdENWZE9fdUw1ZlJwRENDRndlY3UzT2c'); 
 var sheet =  ss.getSheetByName('Charts');
 var data = sheet.getDataRange();

  var completeFilter = Charts.newCategoryFilter().setFilterColumnIndex(0).build();

  var tableChart = Charts.newTableChart()
  .setDataViewDefinition(Charts.newDataViewDefinition().setColumns([0,1]))
  .build();

  var pieChart = Charts.newPieChart()
  .setDataViewDefinition(Charts.newDataViewDefinition().setColumns([0,1]))
  .setTitle('Number of completed tasks')
  .build();

  var dashboard = Charts.newDashboardPanel().setDataTable(data)
  .bind([completeFilter], [tableChart, pieChart])
  .build();

  var app = UiApp.createApplication();
  var headerPanel = app.createHorizontalPanel();
  headerPanel.add(app.createHTML("<center><h1>Welcome to the Charts Dashboard</h1></center>"));


  var filterPanel = app.createVerticalPanel();
  var chartPanel = app.createHorizontalPanel();
  filterPanel.add(completeFilter).setSpacing(10);
  chartPanel.add(tableChart).add(pieChart).setSpacing(10);

  dashboard.add(app.createVerticalPanel().add(headerPanel).add(filterPanel).add(chartPanel));
  app.add(dashboard);

  return app;  
}

HTML 页面

<html>
<head>
<title> Google Charts Dashboard </title>
</head>
<body>
<h1> Welcome to the Charts Dashboard </h1>
<p>Hello, world! The charts are below: </p>
<p><? var data = createDashboard(); ?> </p>
<p> <?= data ?> </p>
</body>
</html>

有谁知道为什么这不起作用或是否可行？任何帮助表示赞赏。

【问题讨论】：

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

【解决方案1】：

我的经验是，最简单的方法是使用 iFrame。您可以在此处找到有关 iFrame 的详细信息：http://www.w3schools.com/tags/tag_iframe.asp

基本上，您将需要您的 webapp 的 URL 并将其放入 iFrame 中（将显示的 URL 替换为您的 webapp 中的 URL）：

这将进入您的 HTML 中您想要显示仪表板的任何位置。有多种设置高度、宽度等的选项，请尝试一下。

（注意：由于您正在谈论形成 HTML，我假设这不是您正在使用的 g-sites 页面，但如果是，您不能在 g-sites 中使用 HTML 手动插入 iFrame . 但是，您可以使用一个 iFrame 小工具。转到插入小工具并选择更多小工具...搜索 iFrame，您应该会找到它。嵌入小工具后，小工具的设置中有一个用于放置 URL 的位置您的小工具）

【讨论】：

我已经尝试过了，但它不起作用，可能是因为当我将它部署为 Web 应用程序时，它只允许我在公司域内共享它。
我尝试将其复制到另一个 Google 帐户并将其设置为允许任何人，甚至是匿名的，然后使用该链接，但它仍然不起作用