Fatal编程技术网
  • javascript/
  • Javascript web应用程序上的Google可视化时间线图

Javascript web应用程序上的Google可视化时间线图

javascript google-apps-script google-sheets charts google-visualization

Javascript web应用程序上的Google可视化时间线图,javascript,google-apps-script,google-sheets,charts,google-visualization,Javascript,Google Apps Script,Google Sheets,Charts,Google Visualization,我想根据谷歌表单中的值制作一个时间线图，我被卡住了。。。。 我不知道会出什么问题。代码似乎很好，但只有我一个人 我猜html端没有按它应该的方式读取数组，或者根本没有得到它。 在电子表格中，我只有图表所需的数据 我希望以与在工作表中相同的顺序传递到图表数据。开始和结束应该作为完整的日期和时间传递，我猜在这种格式中是新的'Date0,0,0,12,0,0' 在控制台中，我遇到了这种错误： myFunction未捕获Kod:18 还有这个 承诺中未捕获错误：提供给addRows的参数必须是数字或数组

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

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

我希望以与在工作表中相同的顺序传递到图表数据。开始和结束应该作为完整的日期和时间传递，我猜在这种格式中是新的'Date0,0,0,12,0,0'

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

myFunction未捕获Kod:18

还有这个

承诺中未捕获错误：提供给addRows的参数必须是数字或数组 在gvjs_G.gvjs_.Pp jsapi_编译的_default_module.js:231 在drawChart userCodeAppPanel:23处

还有这个

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

第二个错误可能是因为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;

}

    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>
    
    <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>
以防万一谷歌文档在时间线上

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

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

也许有人觉得它有用：

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

}

    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>
在开发控制台中提供浏览器日志？@TheMaster我编辑了一个问题，并将控制台日志放入其脚本编辑器>查看>执行>检查服务器日志时间点这是你的罪魁祸首：新日期。别忘了，不幸的是，你不能直接通过考试。作为一个巧妙的技巧，在服务器端使用JSON.stringify，在客户端使用JSON.parse，假设您的数据结构仍然存在serializaiton@Pimo-嗯，日期字符串可能不正确-您确定传递的实际上是UTC日期字符串吗？原因如果它是2020-10-26T23:00:00.000Z，那么在解析回它时应该没有问题。尝试记录输出，很可能是出了问题。另外请注意，构造函数是用新操作符Try with and without调用的，请查看区别