时间戳

首页 > 解决方案 > Web 应用程序上的 Google 可视化时间线图

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

问题描述

我想根据谷歌表格中的值制作一个时间线图，但我被卡住了……我不知道有什么问题。代码似乎很好，但它只是我。

我猜 html 端没有按应有的方式读取数组，或者根本没有得到它。在电子表格中，我只有图表所需的数据。时间线数据

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

在控制台中，我收到这种错误：

在 myFunction 中未被捕获 (Kod:18)

还有这个

未捕获（承诺中）错误：给 addRows 的参数必须是 drawChart (userCodeAppPanel:23) 的 gvjs_G.gvjs_.Pp (jsapi_compiled_default_module.js:231) 处的数字或数组

还有这个

错误 脚本中出现错误，但没有错误代码：错误：无法返回无效日期。在未知功能

第二个错误可能是因为 draChart 函数没有从电子表格中获取数据

代码.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

你能告诉我可能出了什么问题吗？

标签： javascriptgoogle-apps-scriptgoogle-sheetschartsgoogle-visualization

解决方案

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

可能有人觉得它有用：

代码.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>

推荐阅读