如何更改 JavaScript 中的时间格式？

Question

我正在尝试使用 google 可视化制作时间轴。我在文档示例代码中找到了，似乎如果我只更改行值应该没问题。

我的数据是这样的TimeLineData 所以你可以看到我拥有做这件事所需的一切。

我的问题是如何更改 C 和 D 列中的日期

来自：[10 月 29 日星期四 09:05:00 GMT+09:00 2020] 为此：新日期（2020,10,29,9,5,0），

需要将其放入应如下所示的行中：（来自示例）

[ 'Magnolia Room', 'Beginning JavaScript',       new Date(0,0,0,12,0,0),  new Date(0,0,0,13,30,0) ],

我猜你可以使用整个范围内的数组，但我不知道如何处理整个数组，所以我将它分成了 4 个部分。不知道对不对

电子表格中数据的顺序与其在行中的顺序相同

 [ 'Machine', 'Product',       new Date(start),  new Date(end) ],

任何建议都会有所帮助！

这是我得到的：

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

<script type="text/javascript">

function timelineData(){
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const srcSheet = ss.getSheetByName("Array");
  const srcValues = srcSheet.getRange(2, 1, srcSheet.getLastRow(), srcSheet.getLastColumn()).getValues();
  
  
  const machine = srcSheet.getRange(2, 1, srcSheet.getLastRow()).getValues();
  const order = srcSheet.getRange(2, 2, srcSheet.getLastRow()).getValues();

  const startDate = srcSheet.getRange(2, 3, srcSheet.getLastRow()).getValues();
  const endDate = srcSheet.getRange(2, 4, srcSheet.getLastRow()).getValues();
        
  

}

  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    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: 'Order' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
       [ 'Magnolia Room', 'Beginning JavaScript',       new Date(0,0,0,12,0,0),  new Date(0,0,0,13,30,0) ],
      [ 'Magnolia Room', 'Intermediate JavaScript',    new Date(0,0,0,14,0,0),  new Date(0,0,0,15,30,0) ],
      [ 'Magnolia Room', 'Advanced JavaScript',        new Date(0,0,0,16,0,0),  new Date(0,0,0,17,30,0) ],
      [ 'Willow Room',   'Beginning Google Charts',    new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Willow Room',   'Intermediate Google Charts', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Willow Room',   'Advanced Google Charts',     new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ]

    ]);

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

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

所以我用@Marios 的代码编辑了代码，现在它看起来像这样：

     function drawChart() {
    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])]);
    var container = document.getElementById('example5.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows(newAr);

    var options = {
      timeline: { colorByRowLabel: true }
    };

    chart.draw(dataTable, options);
  }

我不知道为什么，但它不起作用

Answer 1

解释：

我相信你的目标是创建一个数组，其中第三列和第四列是日期对象。
您实际上需要将 new Date() 应用于数据第三列和第四列中的每个元素。
您可以使用 map() 来实现您的目标：

const newAr = srcValues.map(r=>[r[0],r[1],new Date(r[2]),new Date(r[3])]);

解决方案：

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)
}

然后你应该能够将该数组传递给 dataTable.addRows:

dataTable.addRows(newAr)

如何更改 JavaScript 中的时间格式？

How to change time format in JavaScript?

javascript

charts

google-visualization

google-sheets

google-apps-script

解释：

解决方案：