Google Visualization Timeline日期格式转换与表格数据对接问题排查

你遇到的核心问题是环境混淆：你把Google Apps Script的服务器端代码（SpreadsheetApp相关逻辑）直接写在了前端浏览器运行的drawChart函数里。前端JavaScript环境根本不认识SpreadsheetApp这个对象，这才导致代码无法运行。

下面是修正后的完整实现方案，分服务器端（.gs文件）和前端（HTML文件）两部分：

1. 服务器端代码（Code.gs） #

负责读取Google Sheets里的数据，处理日期格式后返回给前端：

// 用于加载前端页面
function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

// 读取并处理时间线数据
function getTimelineData() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const srcSheet = ss.getSheetByName("timeLineData");
  
  // 避免空行干扰，只读取有数据的范围
  const lastRow = srcSheet.getLastRow();
  if (lastRow < 2) return [];
  
  const srcValues = srcSheet.getRange('A2:D' + lastRow).getValues();
  
  // 将日期对象转为ISO字符串（跨环境传递日期的安全方式）
  return srcValues.map(row => [
    row[0],
    row[1],
    row[2] instanceof Date ? row[2].toISOString() : null,
    row[3] instanceof Date ? row[3].toISOString() : null
  ]);
}

2. 前端页面代码（Index.html） #

负责加载Google Charts、调用后端接口获取数据、渲染时间线：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <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(fetchDataAndDraw);

      // 先从后端获取数据，再渲染图表
      function fetchDataAndDraw() {
        google.script.run
          .withSuccessHandler(drawTimelineChart)
          .withFailureHandler(error => console.error('数据获取失败:', error))
          .getTimelineData();
      }

      function drawTimelineChart(timelineData) {
        const container = document.getElementById('timeline-container');
        const chart = new google.visualization.Timeline(container);
        const 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' });
        
        // 把后端返回的ISO字符串转回Date对象
        const chartRows = timelineData.map(row => [
          row[0],
          row[1],
          row[2] ? new Date(row[2]) : null,
          row[3] ? new Date(row[3]) : null
        ]);
        
        dataTable.addRows(chartRows);
        
        // 图表配置
        const options = {
          timeline: { colorByRowLabel: true },
          height: 400
        };
        
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id="timeline-container" style="width: 100%; height: 400px;"></div>
  </body>
</html>

关键注意事项 #

1. 部署Web应用：写完代码后，需要把你的Google Apps Script项目部署为Web应用，权限设置根据需求选择（比如"Anyone, even anonymous"允许匿名访问）。
2. 工作表名称匹配：确保你的Google Sheets里确实有名为timeLineData的工作表，且A-D列对应Machine、Order、Start、End。
3. 日期格式验证：确保工作表里的C、D列是日期格式，不是纯文本，否则后端无法识别为Date对象。

内容的提问来源于stack exchange，提问作者Pimo