Question

我目前正在从Google表格中查询一个带有“日期”列的表格。我的信息中心中的日期列包含了要删除的时间信息；我的代码中的开始日期也是2018年12月18日，但是我的信息中心是从一天前开始的。 12/17/2018 16.00

我的数据源如下：

我的仪表盘如下：

我的代码看起来像这样。

Code.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>

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

非常感谢您的帮助。

Answer 1

我遇到了实际问题，但确实有解决方法；请参见下面的修改后的代码示例，其中包含一些其他错误处理。

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

问题在客户端成功处理程序中体现出来，当包含“ I”列时，该处理程序本质上传递了null参数，请注意整个对象（而不仅仅是row.data1部分）为null。

从服务器传递到客户端的行对象非常复杂（一个具有3个键值对的对象，其中值是相当长的数组）。我在GAS documentation中看不到任何不允许这样做的内容：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;
    }

在带有日期列的Google App脚本中创建表

1 个答案: