Question

我使用Google Script创建了Google Charts信息中心，当我将其部署为网络应用时，它运行正常。我想知道是否有办法将仪表板嵌入到HTML页面中？我尝试过使用HTML服务而不是UI服务，但它没有显示仪表板，只是说“UIApplication”。以下是仪表板和HTML页面的代码。

Google脚本中的信息中心

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>

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

Answer 1

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

基本上，您需要使用网络应用的网址并将其放在iFrame中（将此网址替换为网络应用中显示的网址）：

无论您想在何处显示信息中心，都可以使用HTML。设置高度，宽度等有几种选择，所以请试用它。

（注意：由于您正在谈论形成HTML，我假设这不是您正在使用的g网站页面，但如果是，则无法手动执行在g-sites中使用HTML插入iFrame。但是，您可以使用一个iFrame小工具。转到插入小工具并选择更多小工具...搜索iFrame，您应该找到它。一旦您嵌入小工具，就会出现＆＃39 ;小工具设置中的位置，用于放置小工具的网址）

在网站中嵌入Google Charts信息中心

1 个答案: