Google图表，带有AJAX请求的日历实现

Question

我想在我的网站上实现这个漂亮的日历图表。

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>

Answer 1

为了通过json从数据库中获取真实日期，您将需要使用Google的数据表json格式，在这里找到-> Format of the DataTable Constructor's JavaScript Literal data Parameter

和...-> Dates and Times Using the Date String Representation

这意味着您的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>