将 google 脚本 variable/array 传递给 HTML

Question

我正在构建一个 Web 应用程序，它是 google 的图表时间轴。我有一个脚本 returns 我从 google 表中得到正确的数组。我想将此结果传递给特定位置的 HTML。我正在使用 google 应用程序脚本。

function doGet(e) {
  
  return HtmlService.createTemplateFromFile('timeline3').evaluate();


}

function useDataRange() {
  
var rows = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data');
var test = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data').getRange(3, 7, rows.getLastRow(), 1).getValues();

test = test.slice(0,rows.getLastRow()-2);
JSON.stringify(test);
Logger.log(test);
return test;

}

这是我的 HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    
  </head>
  <body>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(getData);

      function getData(){

        return google.script.run.withSuccessHandler(drawChart).useDataRange();
        
      }
      function drawChart(arrayFromSheets) {
        var container = document.getElementById('timeline-tooltip');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });        
        dataTable.addColumn({ type: 'string', id: 'dummy bar label' });
        dataTable.addColumn({ type: 'string', role: 'tooltip' });
        dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows(arrayFromSheets);

        chart.draw(dataTable);
      }
    </script>
    <div id="timeline-tooltip" style="height: 400px;"></div>
  </body>
</html>

我正在尝试用我的数组填充 dataTable.addRows()。我查看了 google 的文档，这应该可行。我只是不明白。请帮忙

这是我从 useDataRange 函数返回的数组示例：

[['Lady Gita' ,null , 'June 19 -26' , '#176BEF', new Date(2021, 6, 19) , new Date(2021, 6, 26)], ['Lady Gita' ,null , 'Jun 27 - Jul 11' , '#FF3E30', new Date(2021, 6, 27) , new Date(2021, 7, 11)]]

在控制台中搜索我得到这个： Console:

Answer 1

为什么不只是 var test = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data').getRange(3, 7, rows.getLastRow()-2, 1).getValues(); 第三个参数是行数而不是最后一行

Answer 2

数组没有作为数组传递，因为我在其中有一个函数。它们都被传递为未定义。我不得不稍微改变一下我的 sheet 但它现在可以工作了。 null 也显示为 BarLabel，所以我用选项关闭了 BarLabel。现在效果很好！

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">

    <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(getData);

      function getData(){
        google.script.run.withSuccessHandler(drawChart).useDataRange();
      }

      function drawChart(data) {
        var container = document.getElementById('timeline-tooltip');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President'});        
        dataTable.addColumn({ type: 'string', id: 'dummy bar label'});
        dataTable.addColumn({ type: 'string', role: 'tooltip'});
        dataTable.addColumn({ type: 'string', id: 'style', role: 'style'});
        dataTable.addColumn({ type: 'date', id: 'Start'});
        dataTable.addColumn({ type: 'date', id: 'End'});
        
        var rows = [];

        //Loop through the data you loaded and push it to the rows array
       

        for(var i=0; i<data.length; i++){
          var currentElement = data[i];
          var transformFirstDate = new Date(currentElement[4]);
          var transformSecondDate = new Date(currentElement[5]);

          rows.push([currentElement[0],currentElement[1],currentElement[2],currentElement[3],transformFirstDate,transformSecondDate]);
        }

        

        dataTable.addRows(rows);

        var options = {
        timeline: { showBarLabels: false }        
      };

        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <!--Div that will hold the pie chart-->
    <div id="timeline-tooltip" style="height: 400px;"></div>
  </body>
</html>

将 google 脚本 variable/array 传递给 HTML

Pass google script variable/array to HTML

html

javascript

google-visualization

google-apps-script