Question

在Google Spreadhseet中我有code.gs：

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('index')
      .setWidth(900)
      .setHeight(700);
  SpreadsheetApp.getUi() 
      .showModalDialog(html, 'My custom dialog');
}

和index.html：

<script src="https://www.google.com/jsapi"></script>
<script>

try{
google.load("visualization", "1.1", {packages:["calendar"]});
google.setOnLoadCallback(drawChart);

function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
// Many rows omitted for brevity.
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]);

var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

var options = {
title: "Red Sox Attendance",
height: 350,
};

chart.draw(dataTable, options);
}
} catch(e){
alert(e);
}
</script>


<div id="calendar_basic" style="width: 1000px; height: 350px;"></div>

我想使用以下示例代码在对话框中显示图表：https://google-developers.appspot.com/chart/interactive/docs/gallery/calendar

但是这会返回一个空对话框。没有错误。

我该怎么做才能解决这个问题？

Answer 1

由于very recently您已经能够在HTMLService创建的对话框中使用Visualization服务：

HTMLService中令人兴奋的新开发是iFrame sandbox mode which removes a lot of the Caja restrictions的添加，其中之一是您可以使用可视化服务。你只需要添加：

.setSandboxMode(HtmlService.SandboxMode.IFRAME)

到HTMLService调用。

所以在code.gs中使用它（我已经为对话框添加了一个菜单项）：

function onOpen() {

  SpreadsheetApp
    .getUi()
    .createMenu('Show Dialog')
    .addItem('Show dialog...', 'showDialog')
    .addToUi()
}

function showDialog() {

  var html = HtmlService.createHtmlOutputFromFile('index')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(900)
      .setHeight(700);

  SpreadsheetApp.getUi() 
      .showModalDialog(html, 'My custom dialog');
}

和index.html中的这个（请注意，您需要将您的Doctype，html，正文再次带入原始HTML，而不是Cajaised）：

<!DOCTYPE html>

<html>
<body>
<div id="calendar_basic" style="width: 1000px; height: 350px;"></div>

<script src="https://www.google.com/jsapi"></script>

<script>

  try{
    google.load("visualization", "1.1", {packages:["calendar"]});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
      var dataTable = new google.visualization.DataTable();
      dataTable.addColumn({ type: 'date', id: 'Date' });
      dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
      dataTable.addRows([
      [ new Date(2012, 3, 13), 37032 ],
      [ new Date(2012, 3, 14), 38024 ],
      [ new Date(2012, 3, 15), 38024 ],
      [ new Date(2012, 3, 16), 38108 ],
      [ new Date(2012, 3, 17), 38229 ],
      // Many rows omitted for brevity.
      [ new Date(2013, 9, 4), 38177 ],
      [ new Date(2013, 9, 5), 38705 ],
      [ new Date(2013, 9, 12), 38210 ],
      [ new Date(2013, 9, 13), 38029 ],
      [ new Date(2013, 9, 19), 38823 ],
      [ new Date(2013, 9, 23), 38345 ],
      [ new Date(2013, 9, 24), 38436 ],
      [ new Date(2013, 9, 30), 38447 ]
      ]);

      var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

      var options = {
      title: "Red Sox Attendance",
      height: 350,
      };

        chart.draw(dataTable, options);
    }
  } catch(e){
    alert(e);
  }

</script>

</body>
</html>

您将能够在对话框中看到您的图表...我很抱歉，但这太酷了！

如果您想看到它的动作，我已经创建了quick demo。如果你想玩代码，请复制一份。

Answer 2

不幸的是，App Script无法添加Google Visualization Library。由于App Script基于Caja编译器（https://code.google.com/p/google-caja/），因此无法保证外部JS库能够正常工作。

您可以在以下链接中阅读更多详细信息：
https://developers.google.com/apps-script/guides/html/restrictions#javascript

无法在模式对话框中嵌入Google Chart Service

2 个答案: