在 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
但这将返回一个空对话框。不会抛出任何错误。
我该怎么做才能解决这个问题？
最佳答案
自 very recently您已经能够在 HTMLService 创建的对话框中使用可视化服务:
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、body 带回来，因为它又是原始 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如果你想看到它的 Action 。如果您想使用代码，请复制一份。
关于javascript - 无法在模式对话框中嵌入 Google 图表服务，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27428449/