如何在从电子表格中获取的谷歌可视化数据表列中包含日期列

Question

我有一个如下所示的 Google 表格：

   Date     Sales
31/03/2017  1000
30/06/2017  2000
30/09/2017  1500
31/12/2017  2500
31/03/2018  4000

如果我在 Google 图表中使用 .arrayToDataTable 导入它并将第 0 列的类型设置为“日期”或“字符串” - 它不喜欢它，因为日期只是一个格式化的数字，即 43190 = 31/3 /2018。所以类型必须是“数字”，然后只在图表上显示基础数字而不是日期

我可以遍历每个行的值，我已经尝试用这个来改变它们

function formatDate(date) {
   var d = new Date((date - 25569)*86400*1000),
   locale = "en-us",
   month = d.toLocaleString(locale, { month: "short" });
   var formattedDate = d.getDay() + "/" + month + "/" + d.getFullYear();
   return formattedDate
}

这会将数字转换为日期字符串 - 因此输入 43190 会返回 2018 年 3 月 31 日，但我仍然无法将列类型更改为“日期”

我可以将日期输出为字符串，但它们不按时间顺序排序，而是按字母顺序排序 - 我希望它们按时间顺序排列。

谁能告诉我哪里出错了？

编辑：

如果我将功能更改为

function formatDate(date) {
  var d = new Date((date - 25569)*86400*1000)
  return d
}

这现在将列值设置为完整的日期对象

但我收到一条错误消息“值 Sun Jun 30 2013 01:00:00 GMT+0100（GMT Summer Time）与列索引 0 中的类型编号不匹配”

现在这必须是指数据表的第 0 列，在原始表中，它是一个日期编号。我试过添加：

data.setColumnProperty(0, 'type' , 'date')

但似乎得到了同样的错误。

也许我没有在代码中的正确位置更改类型。

澄清：我从谷歌表中的一个范围中获取原始值，然后使用 .arrayToDataTable 将该范围转换为数据表。所以我不确定我是否可以在制作数据表时定义列类型，因此单独尝试：

data.setColumnProperty(0, 'type' , 'date')

Answer 1

您必须在日期类型列中提供完整的日期对象。

可以在此处找到有关日期的良好文档 https://developers.google.com/chart/interactive/docs/datesandtimes#axesgridlinesticks

日期和销售的例子可以是

var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');

        data.addRows([
          [new Date(2015, 0, 1), 5],  [new Date(2015, 0, 2), 7],  [new Date(2015, 0, 3), 3],
          [new Date(2015, 0, 4), 1],  [new Date(2015, 0, 5), 3],  [new Date(2015, 0, 6), 4],
          [new Date(2015, 0, 7), 3],  [new Date(2015, 0, 8), 4],  [new Date(2015, 0, 9), 2],
          [new Date(2015, 0, 10), 5], [new Date(2015, 0, 11), 8], [new Date(2015, 0, 12), 6],
          [new Date(2015, 0, 13), 3], [new Date(2015, 0, 14), 3], [new Date(2015, 0, 15), 5],
          [new Date(2015, 0, 16), 7], [new Date(2015, 0, 17), 6], [new Date(2015, 0, 18), 6],
          [new Date(2015, 0, 19), 3], [new Date(2015, 0, 20), 1], [new Date(2015, 0, 21), 2],
          [new Date(2015, 0, 22), 4], [new Date(2015, 0, 23), 6], [new Date(2015, 0, 24), 5],
          [new Date(2015, 0, 25), 9], [new Date(2015, 0, 26), 4], [new Date(2015, 0, 27), 9],
          [new Date(2015, 0, 28), 8], [new Date(2015, 0, 29), 6], [new Date(2015, 0, 30), 4],
          [new Date(2015, 0, 31), 6], [new Date(2015, 1, 1), 7],  [new Date(2015, 1, 2), 9]
        ]);

您可以在选项中添加以下内容来格式化您的日期

hAxis: {
    format: 'MM/dd/yyyy'
}