Google Charts, реализация календаря с AJAX-запросом - PullRequest
Новая
       5

Google Charts, реализация календаря с AJAX-запросом

3 голосов
/ 01 декабря 2019

Я хочу реализовать эту красивую календарную диаграмму на моем веб-сайте.

https://developers -dot-devsite-v2-prod.appspot.com / chart / interactive / docs / gallery / calendar

Предположим, что клиент выполняет запрос ajax при загрузке страницы, а сервер запрашивает данные из базы данных и отвечает многомерным массивом в формате JSON.

Как выполнить цикл дообновить карту? 

 <script>
      google.charts.load("current", {packages:["calendar"]});
      google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
       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 ],
          // Many rows omitted for brevity.
          [ 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: 950,
       };

       chart.draw(dataTable, options);
   }
    </script>

1 Ответ

1 голос
/ 02 декабря 2019

чтобы получить реальную дату из базы данных через json,
вам нужно будет использовать формат данных json таблицы данных Google,
, найденный здесь -> Формат JavaScript констант данных DataTable.

и ... -> Даты и время с использованием представления строки даты

, что означает, что ваш json должен быть отформатирован следующим образом ... 

{
  "cols": [
    {"label": "Date", "type": "date"},
    {"label": "Won/Loss", "type": "number"}
  ],
  "rows": [
    {"c":[{"v": "Date(2012, 3, 13)"}, {"v": 37032}]},
    {"c":[{"v": "Date(2012, 3, 14)"}, {"v": 38024}]},
    {"c":[{"v": "Date(2012, 3, 15)"}, {"v": 38024}]},
    {"c":[{"v": "Date(2012, 3, 16)"}, {"v": 38108}]},
    {"c":[{"v": "Date(2012, 3, 17)"}, {"v": 38229}]},
    {"c":[{"v": "Date(2013, 9, 4)"}, {"v": 38177}]},
    {"c":[{"v": "Date(2013, 9, 5)"}, {"v": 38705}]},
    {"c":[{"v": "Date(2013, 9, 12)"}, {"v": 38210}]},
    {"c":[{"v": "Date(2013, 9, 13)"}, {"v": 38029}]},
    {"c":[{"v": "Date(2013, 9, 19)"}, {"v": 38823}]},
    {"c":[{"v": "Date(2013, 9, 23)"}, {"v": 38345}]},
    {"c":[{"v": "Date(2013, 9, 24)"}, {"v": 38436}]},
    {"c":[{"v": "Date(2013, 9, 30)"}, {"v": 38447}]}
  ]}

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

с включением ajax будет выглядеть примерно так:.

примечание: поскольку файл здесь недоступен, ТАК,
обратный вызов сбоя будет вызван в следующем рабочем фрагменте ... 

google.charts.load('current', {
  packages: ['calendar']
}).then(function () {
  var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

  var options = {
    title: 'Red Sox Attendance',
    height: 950
  };

  $.ajax({
    url: 'output.txt',
    type: 'GET',
    dataType: 'json'
  }).done(function (data) {

    // create data table, draw chart
    var dataTable = new google.visualization.DataTable(data);

    chart.draw(dataTable, options);

    $(window).on('resize', function () {
      chart.draw(dataTable, options);
    });

  }).fail(function (jqXHR, status, errorThrown) {

    // remove in production
    var dataTable = new google.visualization.DataTable({
      "cols": [
        {"label": "Date", "type": "date"},
        {"label": "Won/Loss", "type": "number"}
      ],
      "rows": [
        {"c":[{"v": "Date(2012, 3, 13)"}, {"v": 37032}]},
        {"c":[{"v": "Date(2012, 3, 14)"}, {"v": 38024}]},
        {"c":[{"v": "Date(2012, 3, 15)"}, {"v": 38024}]},
        {"c":[{"v": "Date(2012, 3, 16)"}, {"v": 38108}]},
        {"c":[{"v": "Date(2012, 3, 17)"}, {"v": 38229}]},
        {"c":[{"v": "Date(2013, 9, 4)"}, {"v": 38177}]},
        {"c":[{"v": "Date(2013, 9, 5)"}, {"v": 38705}]},
        {"c":[{"v": "Date(2013, 9, 12)"}, {"v": 38210}]},
        {"c":[{"v": "Date(2013, 9, 13)"}, {"v": 38029}]},
        {"c":[{"v": "Date(2013, 9, 19)"}, {"v": 38823}]},
        {"c":[{"v": "Date(2013, 9, 23)"}, {"v": 38345}]},
        {"c":[{"v": "Date(2013, 9, 24)"}, {"v": 38436}]},
        {"c":[{"v": "Date(2013, 9, 30)"}, {"v": 38447}]}
      ]
    });

    chart.draw(dataTable, options);

    $(window).on('resize', function () {
      chart.draw(dataTable, options);
    });

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="calendar_basic"></div>
...