时间戳

首页 > 解决方案 > 使用日期列在 Google App 脚本中创建表

javascript - 使用日期列在 Google App 脚本中创建表

问题描述

我目前正在从具有日期列的 Google 工作表中查询一个表。我的仪表板中的日期列包含时间信息，我想将其删除；我的代码中的开始日期也是 2018 年 12 月 18 日，但我的仪表板从前一天开始。2018 年 12 月 17 日 16.00

我的数据源如下所示：

在此处输入图像描述

我的仪表板如下所示：

在此处输入图像描述

我的代码看起来像这样。

代码.gs：

function doGet(e) {
  
  return HtmlService
  .createTemplateFromFile("Line Chart multiple Table")
  .evaluate()
  .setTitle("Google Spreadsheet Chart")
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  
}

function getSpreadsheetData() {
  
  var ssID  = "1jxWPxxmLHP-eUcVyKAdf5pSMW6_KtBtxZO7s15eAUag";
  var sheet = SpreadsheetApp.openById(ssID).getSheets()[1];
  
 
  var data1 = sheet.getRange('A2:F9').getValues();
  var data2 = sheet.getRange('A2:F9').getValues();

  
  var rows   = {data1: data1, data2: data2};

 var r = JSON.stringify(rows);
      return r;
    }

折线图多个Table.html

<!DOCTYPE html>
<html>

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

<body>


  <div id="linechartweekly"></div>
  <div id="table2"></div>
 
  <div class = "block" id="message" style="color:red;">
  

  <script>
    google.charts.load('current', {'packages':['table']});
    
    google.charts.load('current', {packages: ['corechart', 'line']});
     
    google.charts.setOnLoadCallback(getSpreadsheetData);
    
     function display_msg(msg) {
          console.log("display_msg():"+msg);
          document.getElementById("message").style.display = "block"; // Style of display
          var div = document.getElementById('message');
          div.innerHTML = msg;
    }

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

    function drawChart(r) {
      // Parse back to an object 
      var rows = JSON.parse(r); 
          
       console.log("rows:"+rows);  

         
      var data1 = google.visualization.arrayToDataTable(rows.data1, false);
      
      var data2 = google.visualization.arrayToDataTable(rows.data2, false);
    
       
      var options1 = {
        title: 'SPC Chart weekly',
        legend: ['USL', 'UCL', 'Data', 'LCL', 'LSL'],
        colors: ['Red', 'Orange', 'blue', 'Orange', 'Red'],
        pointSize: 4,
      };
            
      var chart1 = new google.visualization.LineChart(document.getElementById("linechartweekly"));
      chart1.draw(data1, options1);
     
      var table2 = new google.visualization.Table(document.getElementById("table2"));
      table2.draw(data2, {showRowNumber: false, width: '50%', height: '100%'});   
  
    }
    
    function failure_callback(error) {         
         display_msg("ERROR: " + error.message);
         console.log('failure_callback() entered. WTF'+error.message);
    }
    
  </script>
</body>

</html>

我可以知道如何将我的日期更改为正确的格式，删除时间并确保正确的开始日期

任何帮助深表感谢。

标签： javascripthtmlgoogle-apps-scriptgoogle-sheets

解决方案

实际问题让我很困惑，但我确实有一个解决方法；请参阅下面的修改后的代码示例，以及一些额外的错误处理。

row我已经广泛测试了服务器端功能，从它的角度来看，无论范围从“I”列还是“J”列开始，创建的对象绝对没有区别。

问题表现在客户端成功处理程序中，当包含“I”列时，实际上传递了一个空参数，请注意整个对象，而不仅仅是 row.data1 部分，是空的。

从服务器传递到客户端的行对象非常复杂（具有 3 个键值对的对象，其中的值是相当长的数组）。我在GAS 文档中看不到任何不允许这样做的内容：Legal parameters and return values are JavaScript primitives like a Number, Boolean, String, or null, as well as JavaScript objects and arrays that are composed of primitives, objects and arrays.所以这可能是一个错误？

下面的代码示例中说明的解决方法是在服务器端函数中对对象进行字符串化，然后将其解析回客户端中的对象。

HTML

<!DOCTYPE html>
<html>

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

<body>

  <div id="table1"></div>
  <div id="linechartweekly"></div>
  <div id="table2"></div>

  <div class = "block" id="message" style="color:red;">

  <script>
    google.charts.load('current', {'packages':['table']});
    google.charts.load('current', {packages: ['corechart', 'line']});
    google.charts.setOnLoadCallback(getSpreadsheetData);

    function display_msg(msg) {
          console.log("display_msg():"+msg);
          document.getElementById("message").style.display = "block"; // Style of display
          var div = document.getElementById('message');
          div.innerHTML = msg;
    }

    function getSpreadsheetData() {
      google.script.run.withFailureHandler(failure_callback).withSuccessHandler(drawChart).getSpreadsheetData();
    }

    function drawChart(r) {
      // Parse back to an object 
      var rows = JSON.parse(r); 

      console.log("rows:"+rows);  
      var data1 = google.visualization.arrayToDataTable(rows.data1, false);    
      var data2 = google.visualization.arrayToDataTable(rows.data2, false);     
      var data3 = google.visualization.arrayToDataTable(rows.data3, false);

      var options1 = {
        title: 'SPC Chart weekly',
        legend: ['USL', 'UCL', 'Data', 'LCL', 'LSL'],
        colors: ['Red', 'Orange', 'blue', 'Orange', 'Red'],
        pointSize: 4,
      };

      var table1 = new google.visualization.Table(document.getElementById("table1"));
      table1.draw(data1, {showRowNumber: false, width: '50%', height: '100%'});

      var chart1 = new google.visualization.LineChart(document.getElementById("linechartweekly"));
      chart1.draw(data2, options1);

      var table2 = new google.visualization.Table(document.getElementById("table2"));
      table2.draw(data3, {showRowNumber: false, width: '50%', height: '100%'});

    }

    function failure_callback(error) {         
         display_msg("ERROR: " + error.message);
         console.log('failure_callback() entered. WTF'+error.message);
    }

  </script>
</body>

</html>

代码

function doGet(e) {

      return HtmlService
      .createTemplateFromFile("Line Chart multiple Table")
      .evaluate()
      .setTitle("Google Spreadsheet Chart")
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);

    }


    function getSpreadsheetData() {

      var ssID  = "1jxWPxxmLHP-eUcVyKAdf5pSMW6_KtBtxZO7s15eAUag";
      var sheet = SpreadsheetApp.openById(ssID).getSheets()[0];
      //var firstrow = 6; //11th row
      //var range = sheet.getRange(firstrow, 1, sheet.getLastRow() - firstrow + 1, 6);
      //var data1 = range.getValues();

      var d1 = sheet.getRange('A1:B5').getValues();
      var d2 = sheet.getRange('I2:O4').getValues();
      var d3 = sheet.getRange('I2:O4').getValues();
      var rows   = {data1: d1, data2: d2, data3: d3};
      // Stringify the object
      var r = JSON.stringify(rows);
      return r;
    }

推荐阅读