Fatal编程技术网

Google apps script 在网站中嵌入谷歌图表仪表板

google-apps-script google-visualization

Google apps script 在网站中嵌入谷歌图表仪表板,google-apps-script,google-visualization,google-apps,Google Apps Script,Google Visualization,Google Apps,我已经使用谷歌脚本创建了一个谷歌图表仪表板，当我将其部署为一个web应用程序时，它运行良好。我想知道是否有办法将仪表板嵌入HTML页面？我尝试过使用HTML服务而不是UI服务，但不是显示仪表板，它只是显示UIApplication。下面是仪表板和HTML页面的代码 谷歌脚本中的仪表板 function doGet() { return HtmlService .createTemplateFromFile('index') .evaluate(); } fu

我已经使用谷歌脚本创建了一个谷歌图表仪表板，当我将其部署为一个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>
有人知道为什么这不起作用，或者这是可能的吗？非常感谢您的帮助。

根据我的经验，最简单的方法就是使用iFrame。您可以在此处找到有关iFrame的详细信息：

基本上，您需要Web应用程序的URL，并将其放在iFrame中，如下所示，将显示的URL替换为Web应用程序中的URL：

无论您想在哪里显示仪表板，它都会出现在HTML中。有几个选项可以设置高度、宽度等，所以请尝试一下

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

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