Google日历图单击日期，并重定向页面，其中url中的日期

Question

如何在Google日历图表上添加链接？我想使日期可单击，然后单击它，该页面将被重定向，然后点击的日期应在URL中。因此，我期望这样的链接。mypage.php？date = 2019-02-21

这是我的代码。

<script type="text/javascript">
      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([
        <?php
            $show=mysqli_query($con,"SELECT * FROM event");
            while($found=mysqli_fetch_array($show)){ 
                $event_id = $found['event_id'];
                $event_date = $found['event_date'];
                $sd = date_parse_from_format("Y-n-d", $event_date);
                $year = $sd["year"];
                $month = $sd["month"] - 1;
                $day = $sd["day"];  
                    $febs=mysqli_query($con,"SELECT COUNT(*) FROM event WHERE event_date = '$event_date'");
                    $row = mysqli_fetch_array($febs);
                    $counts = $row[0];
        ?>
          [ new Date(<?php echo $year; ?>, <?php echo $month; ?>, <?php echo $day; ?>),  <?php echo $counts; ?> ],
        <?php } ?>
        ]);
       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
         var options = {
                 title: "EVENTS CALENDAR PLOT",
                 height: 350,
                 noDataPattern: {
                   backgroundColor: '#75f990',
                   color: '#00ff34'
                 }
               };
       chart.draw(dataTable, options);
   }
</script>

Answer 1

您可以使用图表的'select'事件来知道用户单击哪个日期。
使用日期格式化格式化所选日期并打开URL。

var formatDate = new google.visualization.DateFormat({
  pattern: 'yyyy-MM-dd'
});
google.visualization.events.addListener(chart, 'select', function () {
  var selection = chart.getSelection();
  if (selection.length > 0) {
    window.open('http://thispage.php/?date=' + formatDate.formatValue(new Date(selection[0].date)));
  }
});

请参阅以下工作片段，
例如，目的是将URL写入控制台...

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(), 1]
  ]);
  var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
  var options = {
    title: 'EVENTS CALENDAR PLOT',
    height: 350,
    noDataPattern: {
      backgroundColor: '#75f990',
      color: '#00ff34'
    }
  };
  var formatDate = new google.visualization.DateFormat({
    pattern: 'yyyy-MM-dd'
  });
  google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();
    if (selection.length > 0) {
      //window.open('http://thispage.php/?date=' + formatDate.formatValue(new Date(selection[0].date)));
      console.log('http://thispage.php/?date=' + formatDate.formatValue(new Date(selection[0].date)));
    }
  });
  chart.draw(dataTable, options);
});

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