无法从 Google sheet 为 Google 网络应用程序上的 Google 图表以正确的格式获取 'datetime'

Question

我在 Google 网络应用的 HTML 页面上添加了 Google 折线图 (from here)，数据 table 来自 Google 张。最初，折线图接受 'number' 作为 x 轴，但我将其更改为 'datetime' 并且它接受“new Date(yyyy, MM, dd, HH, mm,ss)”中的日期但是我可以更改日期的格式，但图表不起作用。

我的问题类似于 this question，但这是我第一次使用 Google 网络应用程序或 JavaScript。所以，我无法理解解决方案。

下面是样本数据table:

Date	SP1	Sp2
02/09/2021 00:02:34	2	3.5
02/09/2021 01:02:34	4	7
02/09/2021 02:02:34	10	14

Code.gs:

function getTableDataQQ() {
  const ws = SpreadsheetApp.openById('id').getSheetByName('August');
  const data = ws.getRange(2, 1, ws.getLastRow() - 1, 3).getValues();
  const sheetname = ws.getSheetName();

  return data.map((r) => [
    Utilities.formatDate(
      new Date(r[0]),
      'GMT+0530',
      'yyyy, MM, dd, HH, mm, ss'
    ),
    parseInt(r[1]),
    parseInt(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();
        data.addColumn('number', 'Days');
        data.addColumn('number', 'SP1');
        data.addColumn('number', 'SP2');
        data.addColumn('number', 'SP3');


        data.addRows(dataReturned);


        var opt = {

            title: 'Text 1',
            subtitle: 'Text 2'

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

我使用此 YT tutorial 对原始折线图脚本进行了更改。如果在原始脚本中添加所需数据（如下所示），则折线图有效，但我不知道如何将原始代码与 Google sheet 连接，因为我遵循 YT 教程

原始脚本：

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

    function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('datetime', 'Day');
        data.addColumn('number', 'Guardians of the Galaxy');
        data.addColumn('number', 'The Avengers');
        data.addColumn('number', 'Transformers: Age of Extinction');

        data.addRows([
            [new Date(2021, 09, 01, 19, 02), 37.8, 80.8, 41.8],
            [new Date(2021, 09, 01, 19, 32), 30.9, 69.5, 32.4],
            [new Date(2021, 09, 01, 20, 02), 25.4, 57, 25.7],
            [new Date(2021, 02, 01, 20, 02, 00), 4.2, 6.2, 3.4]
        ]);

        var options = {
            chart: {
                title: 'Box Office Earnings in First Two Weeks of Opening',
                subtitle: 'in millions of dollars (USD)'
            },
            width: 900,
            height: 500
        };

        var chart = new google.charts.Line(document.getElementById('chart'));

        chart.draw(data, google.charts.Line.convertOptions(options));
    }
</script>

谢谢

Answer 1

我认为您当前的问题如下。

在您的脚本中，“A”列的值类似于 '2021,02,08,21,32,34'。在这种情况下，这不能直接用作日期刻度。
在您的示例电子表格中，数据有 3 列。但是在你的 Javascript 中，使用了 4 列。
关于 data.addColumn('number', 'Days');，根据您的示例日期值 02/09/2021 00:02:34、02/09/2021 01:02:34 和 02/09/2021 02:02:34，在这种情况下，我认为 timeofday 可能是合适。

当您的脚本解决了上述问题后，它变成如下。

修改后的脚本：

在这种情况下，请按如下方式修改您的Javascript。

发件人：

var data = new google.visualization.DataTable();
data.addColumn('number', 'Days');
data.addColumn('number', 'SP1');
data.addColumn('number', 'SP2');
data.addColumn('number', 'SP3');


data.addRows(dataReturned);

收件人：

var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Days');
data.addColumn('number', 'SP1');
data.addColumn('number', 'SP2');
var obj = dataReturned.map(([a, ...b]) => [a.split(",").slice(-3).map(e => Number(e)), ...b]);
data.addRows(obj);

的，当你想使用datetime时，你也可以使用下面的修改。

收件人：

var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Days');
data.addColumn('number', 'SP1');
data.addColumn('number', 'SP2');
var obj = dataReturned.map(([a, ...b]) => [new Date(...a.split(",").map((e, i) => i == 1 ? Number(e) - 1 : e)), ...b]);
data.addRows(obj);

参考：

Dates and Times

无法从 Google sheet 为 Google 网络应用程序上的 Google 图表以正确的格式获取 'datetime'

Unable to fetch 'datetime' in correct format from Google sheet for Google chart on Google web apps

javascript

google-apps-script

google-sheets

google-visualization

修改后的脚本：

发件人：

收件人：

收件人：

参考：