将数组从 javascript（Google Apps 脚本）添加到 html 文件

Question

我有一个 html 文件和一个 javascript 文件（Google Apps 脚本），并且 html 文件呈现一个图表。
我想从 javascript 文件向该图表中添加一个数组，但它不起作用（所以尝试这个替代想法）。

这是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);
  function drawChart() {

    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(

      //HERES WHERE I WANT TO ADD IN THE ARRAY THAT FUNCTIONS PROPERLY

    );
    chart.draw(dataTable);
  }
</script>

<div id="example3.1" style="height: 400px;">Graph D</div>

这是我的 Code.gs：

function showDialog() {//This shows the modal which renders the chart

//Firstly replace the placeholder in the html with the below array somehow. Then...
    var html = HtmlService.createHtmlOutputFromFile('GraphD')
    .setWidth(800)
    .setHeight(700);
    SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
    .showModalDialog(html, 'My custom dialog');
}

这是我想在渲染前插入到 html 文件中的数组：

var MyArray = [[ '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', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)]];

所以我希望在渲染之前将上述数组插入到 HTML 中的注释占位符中任何帮助都会很棒。

Answer 1

您希望从 Google Apps Script 传递一个Array作为客户端 Google Charts API 的DataTable方法的参数。

一种方法是使用google.script.run执行服务器端函数来读取/生成要在图表上可视化的数据并将其传递给客户端代码，但此 API 无法传递 JavaScript 日期对象，因此改为为了传递这些类型的对象，我们应该传递它们的一些表示。

如果我们传递一个 JSON 而不是传递包含 Date 对象的 JavaScript 数组呢？ DataTable方法可以支持数组，也可以支持 JSON。

传递一个 JSON，允许我们而不是传递new Date(1789,3,30)来传递"Date(1789,3,30)" （删除new并将剩余的括在引号字符之间）。

例子：

function showDialog() {
  SpreadsheetApp.getUi().showModalDialog(
    HtmlService.createHtmlOutputFromFile("index"), 
    "My dialog")
}

function doSomething(){
  var data = {
    cols:[
      { type: 'string', id: 'Position' },
      { type: 'string', id: 'Name' },
      { type: 'date', id: 'Start' },
      { type: 'date', id: 'End' }
    ],
    rows:[
      {c:[ {v:"President"}, {v:"George Washington"}, {v:"Date(1789, 3, 30)"}, {v:"Date(1797, 2, 4)"}]},
      {c:[ {v:"President"}, {v:"John Adams"}, {v:"Date(1797, 2, 4)"}, {v:"Date(1801, 2, 4)" }]},
      {c:[ {v:"President"}, {v:"Thomas Jefferson"}, {v:"Date(1801, 2, 4)"}, {v:"Date(1809, 2, 4)" }]},
      {c:[ {v:"Vice President"}, {v:"John Adams"}, {v:"Date(1789, 3, 21)"}, {v:"Date(1797, 2, 4)"}]},
      {c:[ {v:"Vice President"}, {v:"Thomas Jefferson"}, {v:"Date(1797, 2, 4)"}, {v:"Date(1801, 2, 4)"}]},
      {c:[ {v:"Vice President"}, {v:"George Clinton"}, {v:"Date(1805, 2, 4)"}, {v:"Date(1812, 3, 20)"}]}
    ]
  }
    return data;
}

索引.html

<div id="example3.1" style="height: 400px;">Graph D</div>

<script src="https://www.gstatic.com/charts/loader.js"></script>

<script>
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    google.script.run.withSuccessHandler(function(data){
      var container = document.getElementById('example3.1');
      var chart = new google.visualization.Timeline(container);
      var dataTable = new google.visualization.DataTable(data);
      chart.draw(dataTable);
   }).doSomething();
  }
</script>

资源

• 日期和时间 | 谷歌图表
• 构造函数的 JavaScript 文字数据参数的格式