从 google 应用程序脚本中的 html 文件调用 javascript 函数

Question

我在 Apps 脚本中有一个项目试图创建一个 google 图表以在 Google 表格上方的模态中弹出。
我有 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>

和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);
  }

请注意，图表本身在 jsfiddle 中绘制得非常好，或者如果我用 'drawChart' 函数和运行函数替换 html 文件中的注释行（而不是该函数在 .gs 文件本身中）。
但我想从 .gs 文件中调用它，因为从 javascript 更改 html 文件很痛苦。这可能吗？

Answer 1

drawChart 需要 Google 图表 JavaScript 库，该库正在客户端代码上加载，它使用 DOM，DOM 在 server-side代码。考虑到这一点，更简单的解决方案是将 drawChart 函数放在 client-side.

上

<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>

从 google 应用程序脚本中的 html 文件调用 javascript 函数

Call javascript function from html file in google apps script

html

javascript

google-visualization

google-sheets

google-apps-script