Google Web Apps调用Google Sheet数据时datetime格式错误致折线图无法加载

核心问题点 #

• 后端返回的是格式化后的日期字符串，不是前端可直接构造Date对象的数值参数，且Google Charts的datetime类型列不能直接识别字符串格式的日期
• 前端DataTable第一列仍配置为number类型，未改为对应datetime类型，且多声明了不存在的SP3列，数据长度不匹配
• 原代码对SP2列用parseInt处理会丢失小数精度，需要改为parseFloat
• JS中Date构造函数的月份参数从0开始计数，需要将原表格的月份值减1处理

修改后的Code.gs代码 #

function getTableDataQQ() {
  const ws = SpreadsheetApp.openById('你的表格ID').getSheetByName('August');
  const data = ws.getRange(2, 1, ws.getLastRow() - 1, 3).getValues();

  return data.map((r) => {
    const date = new Date(r[0]);
    return [
      // 按顺序返回年、月（减1适配JS Date规则）、日、时、分、秒
      [date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()],
      parseInt(r[1]),
      parseFloat(r[2]) // 保留小数精度
    ];
  });
}

修改后的HTML代码 #

<script type="text/javascript">
    google.charts.load('current', {
        'packages': ['line']
    });
    google.charts.setOnLoadCallback(getData);

    function getData() {
        google.script.run.withSuccessHandler(drawChart).getTableDataQQ();
    }

    function drawChart(dataReturned) {
        var data = new google.visualization.DataTable();
        // 第一列改为datetime类型
        data.addColumn('datetime', '日期');
        data.addColumn('number', 'SP1');
        data.addColumn('number', 'SP2');
        // 删掉不存在的SP3列

        // 处理返回的数据，构造Date对象
        const processedData = dataReturned.map(row => {
          const [y, m, d, h, mi, s] = row[0];
          return [new Date(y, m, d, h, mi, s), row[1], row[2]];
        })

        data.addRows(processedData);

        var opt = {
            chart: {
              title: 'Text 1',
              subtitle: 'Text 2'
            },
            width: 1000,
            height: 400
        };
        var chart = new google.charts.Line(document.getElementById('chart'));
        chart.draw(data, google.charts.Line.convertOptions(opt));
    }
</script>

<body>
    <div id="chart" style="width: 1000px; height: 400px"></div>
</body>

额外注意 #

修改代码后记得将SpreadsheetApp.openById里的ID替换为你自己的Google Sheets文档ID。

内容的提问来源于stack exchange，提问作者Gaurav K.M.