在Google Apps脚本网络应用中使用Google Visualization API显示GSheet范围时出错

理查德·阮(Richard Nguyen)

我正在尝试通过Google Apps Script Web App使用Google Table Visualization API显示Google Spreadsheet范围。我计划将Web App部署到Google网站中。当我将代码复制到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 Fiddle代码有效。我可以查询Google Spreadsheet并绘制Google Visualization Table。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>

代码

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>
莫格斯达

您尚未为应用程序正确设置沙箱,因此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(); ?>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Google Visualization Charts API示例已损坏,如何解决?

使用Google Apps脚本保护范围

Google Visualization DataTable更改背景色

Google Visualization API-保存和检索ChartWrapper对象

使用QUnit测试Google Apps脚本网络应用

在Google Apps脚本中使用Wunderlist API时出现“无效请求”错误

Google Visualization按列降序排列

如何在Angular CLI中使用google.visualization类型?

Google Chart Visualization条形图未显示

是否可以在Google Apps脚本网络应用中使用多种身份验证?

Google Visualization group()聚合函数返回null

Google Visualization API在同一HTML上加载2个脚本

Google Visualization SteppedAreaChart,时间未正确对齐

在Google Apps脚本中使用google docs api

Google Chart API(不是Visualization API):如何摆脱注释行

Google Apps脚本网络应用的Drive API推送通知

Google Visualization ControlWrapper高度

如何在Google Visualization Map API中设置zoomLevel?

google.load('visualization'...)错误?

在Google Visualization API(JavaScript)中动态添加行

在Google网站中使用Google Visualization API

在Google Visualization饼图中删除图例

如果语句出错,则使用Google Apps脚本

未捕获的TypeError:google.visualization.LineChart

在Google Apps脚本中使用Google字体

google.visualization.PieChart 不是构造函数

使用 .setProperty() 时,Google Visualization 第 1 行不显示 .ColorFormat()

未显示 Google 图表仪表,类型错误:google.visualization.Gauge 不是构造函数

从 Google Visualization API 查询获取行号到 Google Sheet