Google Web 应用程序上的可视化时间线图表

Question

我想根据 google sheet 中的值制作一个时间线图表，但我卡住了.... 我不知道出了什么问题。代码好像没问题，但就是我。

我猜 html 端没有按应有的方式读取数组，或者根本没有读取数组。在 spreadsheet 中，我只有图表所需的数据。 timeLineData

我想以与 sheet 中相同的顺序传递给图表数据。 Start 和 End 应该作为完整的日期和时间传递（我猜这种格式是 new 'Date(0,0,0,12,0,0)' ）

在控制台中我遇到了这种错误：

Uncaught at myFunction (Kod:18)

还有这个

Uncaught (in promise) Error: Argument given to addRows must be either a number or an array at gvjs_G.gvjs_.Pp (jsapi_compiled_default_module.js:231) at drawChart (userCodeAppPanel:23)

还有这个

Error An error occurred in the script, but there is no error code: Error: Cannot return an invalid date. at unknown function

第二个错误可能是因为 draChart 函数没有从点差中获取数据sheet

code.gs

    function doGet(e) {
 
  Logger.log(e.parameter);
  return HtmlService.createHtmlOutputFromFile("index2");
     
}


function myFunction() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const srcSheet = ss.getSheetByName("timeLineData");
  const srcValues = srcSheet.getRange('A2:D'+srcSheet.getLastRow()).getValues();
  const newAr = srcValues.map(r=>[r[0],r[1],new Date(r[2]),new Date(r[3])]);
  Logger.log(newAr);
  return newAr;

}

和html方：

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">

  function cal2l(){
  
  google.script.run.withSuccessHandler(drawChart).myFunction();
  
  };
  
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  
  function drawChart(newAr) {
    var container = document.getElementById('example3.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Machine' });
    dataTable.addColumn({ type: 'string', id: 'Product' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows(newAr);

    chart.draw(dataTable);
  }
</script>

<div id="example3.1" style="height: 200px;"></div>
    
    
  </body>
</html>

以防万一 google 时间线上的文档Google

你能告诉我哪里出了问题吗？

Answer 1

所以我找到了解决方案，感谢@Oleg Valter 建议我使用 JSON

可能有人觉得它有用：

code.gs

    function doGet() {
 

  return HtmlService.createTemplateFromFile('index').evaluate();
     
}


function timelineData(){
  const ss = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/1KzaKe9ShAZZAlK3CQC-UmrKzZXghNKAAx_pDHFX3YLI/edit#gid=0');
  const srcSheet = ss.getSheetByName("Array");
  const srcValues = srcSheet.getRange(2, 1, srcSheet.getLastRow()-1, 4).getDisplayValues()
  const newAr = srcValues.map(r=>[r[0],r[1], new Date(r[2]), new Date(r[3])]);
  
  const arr = JSON.stringify(newAr);
    
  return arr
}

这里有 HTML:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  
 <h1>機械別工程残</h1>
  <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).timelineData();
  
  }
  
  function drawChart(dane) {
  //console.log(dane);
  const obj = JSON.parse(dane);
   const newAr = obj.map(r=>[r[0],r[1], new Date(r[2]), new Date(r[3])]);
    var container = document.getElementById('chart');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: '機械' });
    dataTable.addColumn({ type: 'string', id: 'オーダー' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows(newAr);
    
    var options = {
     colors: ['#cbb69d', '#603913', '#c69c6e', '#e743f0', '#f04343', '#f0e443', '#b9f043', '#4ff043', '#43f0d9', '#435df0'],
     
     // timeline: { colorByRowLabel: true}
　　};
    chart.draw(dataTable, options);
  }
</script>

<div id="chart" style="height: 600px;"></div>
    
  </body>
</html>

Google Web 应用程序上的可视化时间线图表

Google visualization timeline chart on web app

javascript

charts

google-visualization

google-sheets

google-apps-script