将谷歌脚本变量/数组传递给 HTML答案

【问题标题】：Pass google script variable/array to HTML将谷歌脚本变量/数组传递给 HTML
【发布时间】：2021-07-08 18:03:08
【问题描述】：

我正在构建一个网络应用程序，它是谷歌的图表时间线。我有一个脚本可以从谷歌表格中返回正确的数组。我想将此结果传递给特定位置的 HTML。我正在使用谷歌应用脚本。

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()。我查看了谷歌的文档，这应该可以。我只是不明白。请帮忙

这是我从 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:

【问题讨论】：

我已经复制了你的脚本，问题可能是由于数组中的日期。传递时数组中的日期将采用以下格式：“Thu Apr 30 00:00:00 GMT-15:56 1789”。这纯粹是基于我的观察，但看起来 dataTable 将无法识别数组上的日期，因此无法识别图表。 Google Charts 中的所有示例文章/资源仅显示在 dataTable 上添加日期值时使用 JavaScript Date 类，例如“new Date(1789, 3, 30)”，并且看起来这是不可能的（至少对于 Google Chart）鉴于没有现有的在线指南。
您可以尝试的另一种选择是来自developers.google.com/chart/interactive/docs/… 的“从单独的电子表格创建图表”指南。
是的，使用上面提到的 Query 类...
嘿 Irvin 和 WhiteHate，谢谢你的回答。我会在我这样做时更新你:)
嘿，我真的不擅长查询，必须花时间学习它们。我用可行的解决方案更新了我的答案

标签： javascript html google-apps-script google-visualization

【解决方案1】：

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

【讨论】：

嘿库珀。谢谢您的回答。我在获取正确的数组方面没有问题。我的记录器清楚地显示了正确的数组，如果我只是将它粘贴到 HTML 中，它就可以工作。我想将此数组传递给 addRows(); 中的 HTML 代码。
我假设 html 已经被渲染，所以你必须请求数组并将它返回到 withSuccessHandler
嘿库珀，感谢您的回答！我以为我已经请求了数组并将其返回（参见函数 getData()）。我打开控制台，它给了我这个： jsapi_compiled_default_module.js:295 Uncaught Error: Argument given to addRows must be a number or an array 所以我不清楚执行 getData 时会发生什么，所以我在该函数关闭警报之后放置(getData());并提醒：未定义

【解决方案2】：

数组没有作为数组传递，因为我在其中有一个函数。它们都被作为未定义传递。我不得不改变一点我的床单，但它现在可以工作了。 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>

【讨论】：