在網站中嵌入谷歌圖表儀表板

我已經使用谷歌腳本創建了谷歌圖表儀表板，當我將它部署爲網絡應用程序時，它工作正常。我想知道是否有方法將儀表板嵌入到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>

有誰知道這是爲什麼不工作或者是否有可能？任何幫助表示讚賞。

來源

2014-04-04 Harry12345

我的經驗是，最簡單的方法是使用iFrame。你可以在這裏找到有關iFrame的細節：http://www.w3schools.com/tags/tag_iframe.asp

基本上，你需要你的web應用的URL，並把它放在iFrame中像這樣（取代您的Web應用程序與一個顯示的網址）：

這將在你想要顯示儀表板的任何地方出現在你的HTML中。有幾個選項可用於設置高度，寬度等，因此請試用它。（注意：由於您正在討論形成HTML，我假設這不是您正在使用的g網站頁面，但是如果是這樣，您不能在g-網站中使用HTML手動插入iFrames，但是，您可以使用iFrame小工具，然後插入小工具並選擇更多小工具...搜索iFrame，然後找到該小工具。一旦您嵌入小工具，小工具的設置中就會有一個位置，用於放置你的小工具的網址）

來源

2014-04-04 12:33:42 living2serve

我已經試過了，它不起作用，這可能是因爲當我將它部署爲網絡應用程序時，它只能讓我在公司域中分享它。 – Harry12345

我試圖將其複製到另一個Google帳戶，並將其設置爲允許任何人，甚至匿名，然後使用該鏈接，但仍然無法使用 – Harry12345

在網站中嵌入谷歌圖表儀表板

回答

相關問題