在Google Apps腳本Web應用中使用Google Visualization API顯示GSheet范圍時出錯

Question

我正在嘗試通過Google Apps腳本網絡應用程序使用Google Table Visualization API顯示Google電子表格系列。 我計划將Web App部署到Google Site。 當我將代碼復制到Google Apps腳本Web應用程序項目並部署Web應用程序時，查詢響應為“錯誤請求[400]”。 我該如何進一步調試？

替代方案：

手動工作：Google協作平台有一個小工具可將Gspreadsheet范圍拉到網頁上，但我想以編程方式為70個不同的范圍和頁面進行操作。
純Google Apps腳本：我可以通過編程方式創建包含表格小工具和編輯表格范圍的網頁模板的副本。 在編輯HTML內容時，存在一個已知的問題，即打破小工具（google-apps-script-issues＃572）。

來源Google電子表格 （虛假公開數據） https://docs.google.com/spreadsheets/d/1miOxJ3jPCLE66mWcZmd2q-1YAu6so-GbxjcmIDtXUV4

JS小提琴代碼有效。 我可以查詢Google電子表格並繪制Google可視化表格。 https://jsfiddle.net/xcghpgmt/6/

也可以作為一個片段。

 function drawChart() { var key = '1miOxJ3jPCLE66mWcZmd2q-1YAu6so-GbxjcmIDtXUV4'; var GID = 0; var range = 'A3:h18'; var queryString = 'https://docs.google.com/spreadsheets/d/'+key+'/gviz/tq?gid='+GID+'&range='+range; // Set Data Source var query = new google.visualization.Query(queryString); // Send the query with callback function query.send(handleQueryResponse); } function handleQueryResponse(response) { // Handle Query errors if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } // Draw Chart var data = response.getDataTable(); var chart = new google.visualization.Table(document.getElementById('chart_div')); chart.draw(data); } google.load('visualization', '1', {packages:['table'], callback: drawChart});

 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="chart_div"></div>

Code.gs

function doGet() {
  var html = HtmlService.createTemplateFromFile("Index").evaluate();
  html.setTitle("Dynamic Webpage");
  return html; 
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .getContent();
}

的index.html

<!DOCTYPE html>
<html>
<header>
</header>
<body>
 <div id="chart_div"></div>
</body>

<?!= include('JavaScript.html'); ?>

</html>

Javascript.html

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    function drawChart() {
    var key = '1miOxJ3jPCLE66mWcZmd2q-1YAu6so-GbxjcmIDtXUV4';
    var GID = 0;
    var range = 'A3:h18';
    var queryString = 'https://docs.google.com/spreadsheets/d/'+key+'/gviz/tq?gid='+GID+'&range='+range;

    // Set Data Source
    var query = new google.visualization.Query(queryString);

    // Send the query with callback function
    query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
    // Handle Query errors
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }

    // Draw Chart
    var data = response.getDataTable();
    var chart = new google.visualization.Table(document.getElementById('chart_div'));
    chart.draw(data);
}
google.load('visualization', '1', {packages:['table'], callback: drawChart});
</script>

Answer 1

您沒有為您的應用程序正確設置沙盒，因此caja清理正在剝離jsapi。

更改：

function doGet() {
  var html = HtmlService.createTemplateFromFile("Index").evaluate();
  html.setTitle("Dynamic Webpage");
  return html; 
}

至：

function doGet() {
  var html = HtmlService.createTemplateFromFile("Index").evaluate();
  html.setTitle("Dynamic Webpage").setSandboxMode(HtmlService.SandboxMode.IFRAME);
  return html; 
}

您可以從include()函數中完全刪除沙盒語句，因為它是沙盒所需的應用程序。 更好的是刪除include()並在Index.html中使用它：

<?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>

在Google Apps腳本Web應用中使用Google Visualization API顯示GSheet范圍時出錯

問題描述

1 個解決方案

解決方案1
2 已采納 2015-07-20 02:48:56

在Google Apps腳本Web應用中使用Google Visualization API顯示GSheet范圍時出錯

問題描述

1 個解決方案

解決方案1 2 已采納 2015-07-20 02:48:56

解決方案1
2 已采納 2015-07-20 02:48:56