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

如何解决从javascript将数组添加到html文件Google Apps脚本

我有一个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>

这是我的代码。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',4),new Date(1801,'Thomas Jefferson',new Date(1809,[ 'Vice President',21),4)],'George Clinton',new Date(1805,new Date(1812,20)]];

因此，我希望将上述数组插入HTML中带注释的占位符中，然后再呈现。任何帮助都将非常有用。

解决方法

您希望通过Google Apps脚本传递Array作为客户端Google Charts API的DataTable方法的参数。

一种方法是使用google.script.run来执行服务器端函数，以读取/生成要在图表上可视化的数据并将其传递给客户端代码，但是此API无法传递JavaScript Date对象，因此与其传递这些类型的对象，不如传递它们的某种表示形式。

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

通过JSON，我们可以不用传递new Date(1789,3,30)来传递"Date(1789,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' },id: 'End' }
    ],rows:[
      {c:[ {v:"President"},{v:"George Washington"},{v:"Date(1789,30)"},{v:"Date(1797,2,4)"}]},{c:[ {v:"President"},{v:"John Adams"},4)"},{v:"Date(1801,4)" }]},{v:"Thomas Jefferson"},{v:"Date(1809,{c:[ {v:"Vice President"},21)"},{v:"George Clinton"},{v:"Date(1805,{v:"Date(1812,20)"}]}
    ]
  }
    return data;
}

index.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将数组添加到html文件Google Apps脚本

如何解决从javascript将数组添加到html文件Google Apps脚本

解决方法

相关推荐