Google 图表 API 日历图表

Question

我正在使用 Google 图表 API 进行数据可视化。我想检索图表上所选日期的日期。

我检索到的内容很奇怪。我按照文档的建议在图表上使用了 selectHandler。

  function selectHandler() {

    console.log(chart.getSelection()[0]);

  }

  google.visualization.events.addListener(chart, 'select', selectHandler);

单击以下日期时，我在控制台上读取以下输出：

22/04/2020：1587513600000

19/06/2020 : 1592524800000

这是什么日期格式？谁能帮我？

Answer 1

这是表示自 Unix 纪元以来的毫秒数的日期。
它与日期对象上的 getTime() method 返回的值相同。

您可以将从 selection 接收到的值传递给日期构造函数以获取日期...

var selection = chart.getSelection();
if (selection.length > 0) {
  var selectedDate = new Date(selection[0].date);
}

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['calendar']
}).then(function () {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'date', id: 'Date' });
  dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
  dataTable.addRows([
    [ new Date(2012, 3, 13), 37032 ],
    [ new Date(2012, 3, 14), 38024 ],
    [ new Date(2012, 3, 15), 38024 ],
    [ new Date(2012, 3, 16), 38108 ],
    [ new Date(2012, 3, 17), 38229 ],
    [ new Date(2013, 9, 4), 38177 ],
    [ new Date(2013, 9, 5), 38705 ],
    [ new Date(2013, 9, 12), 38210 ],
    [ new Date(2013, 9, 13), 38029 ],
    [ new Date(2013, 9, 19), 38823 ],
    [ new Date(2013, 9, 23), 38345 ],
    [ new Date(2013, 9, 24), 38436 ],
    [ new Date(2013, 9, 30), 38447 ]
  ]);

  var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

  var options = {
   title: "Red Sox Attendance",
   height: 350,
  };

  function selectHandler() {
    var selection = chart.getSelection();
    if (selection.length > 0) {
      var selectedDate = new Date(selection[0].date);
      console.log(selectedDate);
    }
  }

  google.visualization.events.addListener(chart, 'select', selectHandler);

  chart.draw(dataTable, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="calendar_basic"></div>

注意：在访问内容之前，您应该检查 selection 的长度。
当日期未被 select 编辑时，也会调用 select 事件。
在这种情况下，selection 数组将为空...

Google 图表 API 日历图表

Google Charts API CalendarChart

charts

google-calendar-api

google-api

google-visualization