Google Charts API CalendarChart - PullRequest
Новая
       21

Google Charts API CalendarChart

1 голос
/ 31 марта 2020

Я использую Google Charts API для визуализации данных. Я хотел бы получить дату выбранного дня на графике.

То, что я получаю, довольно странно ... Я использую selectHandler на графике, как рекомендовано документацией. 

  function selectHandler() {

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

  }

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

При нажатии на следующую дату, я читаю следующий вывод на консоли:

22/04/2020: 1587513600000

19/06/2020: 1592524800000

Какой это формат даты? Может кто-нибудь мне помочь?

1 Ответ

2 голосов
/ 31 марта 2020

это дата, представленная в виде количества миллисекунд с момента Unix Epoch.
это то же значение, которое возвращается методом getTime() для объекта даты.

вы можете передать полученное значение из конструктора даты, чтобы получить дату ... 

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>

примечание: вы должны проверить длину выбора перед доступом к содержимому.
событие выбора также вызывается, когда дата не выбрана.
в этом случае массив выбора будет пустым ...

...