[英]Call javascript function from html file in google apps script
I have a project in Apps script that is trying to create a google chart to pop up in a modal above Google Sheets.我在 Apps 脚本中有一个项目,它试图创建一个谷歌图表以在谷歌表格上方的模式中弹出。
I have ChartC.html:我有 ChartC.html:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
google.script.run.drawChart(); //<-----This is where I want to call the function in Code.gs
</script>
<div id="example3.1" style="height: 400px;">GraphC</div>
and Code.gs:和 Code.gs:
function showDialog() { //This pops up the modal
var html = HtmlService.createHtmlOutputFromFile('GraphC')
.setWidth(800)
.setHeight(700);
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(html, 'My custom dialog');
}
function drawChart() { //This draws the chart
var container = document.getElementById('example3.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
[ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
[ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
[ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
[ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
]);
chart.draw(dataTable);
}
Note that the Chart draws perfectly well in jsfiddle by itself OR if I replace the commented line in the html file with the 'drawChart' function and run it (instead of having that function in the .gs file itself).请注意,图表本身在 jsfiddle 中绘制得非常好,或者如果我将 html 文件中的注释行替换为“drawChart”函数并运行它(而不是在 .gs 文件本身中包含该函数)。
But I want to call it from the .gs file because it's a pain to alter the html file from javascript.但我想从 .gs 文件中调用它,因为从 javascript 更改 html 文件很痛苦。 Is this possible?
这可能吗?
The drawChart
requires the Google Charts JavaScript library which is being loaded on the client side code and it use the DOM which is not available on the server-side code. drawChart
需要在客户端代码上加载的 Google Charts JavaScript 库,并且它使用在服务器端代码上不可用的 DOM。 Considering this, the easier solution is to put the drawChart
function on the client-side.考虑到这一点,更简单的解决方案是将
drawChart
函数放在客户端。
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="example3.1" style="height: 400px;">GraphC</div> <script> function drawChart() { //This draws the chart var container = document.getElementById('example3.1'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Position' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ ['President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)], ['President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)], ['President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)], ['Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)], ['Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)], ['Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)], ['Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)], ]); chart.draw(dataTable); } google.charts.load("current", { packages: ["timeline"] }); google.charts.setOnLoadCallback(drawChart); </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.