如何在 Google 可视化中检测日期单元格上的点击事件。日历

Question

我有一个关于 google.visualization.Calendar 的问题。我已经阅读了 [https://developers.google.com/chart/interactive/docs/gallery/calendar#months][1]，但仍然找不到任何解决方案

下面的代码是我用来测试的代码。

var dataTable=new google.visualization.DataTable();
    dataTable.addColumn({type:'date', id:'Date'});
    dataTable.addColumn({type:'number',id:'Events Found'});

    dataTable.addRows([
                       [ new Date(2016, (05-1), 19), 400],
                       [ new Date(2016, 02, 23), 300],
                       [ new Date(2016, 05, 24), 300],
                       [ new Date(2016, 06, 23), 300]
                       ]);

    var chart=new google.visualization.Calendar(document.getElementById('calendarView'));
    var options={
            title: "Event Calendar",
            width: 500,
            height:400,
            calendar: { 
                cellSize: 5 ,
                    focusedCellColor: {
                      stroke: 'red',
                      strokeOpacity: 0.8,
                      strokeWidth: 3
                    }       
            },
             /*noDataPattern: {
                   backgroundColor: '#76a7fa',
                   color: '#a0c3ff'
                 },*/


            calendar: {
                  underYearSpace: 2, 
                  yearLabel: {
                    fontName: 'Times-Roman',
                    fontSize: 32,
                    color: '#e6ecff',
                    bold: true,
                    italic: true
                  }
                }
    };

    chart.draw(dataTable,options);

当用户单击特定日期时，我需要添加一个单击事件处理程序。该怎么做？

以下是我测试但没有结果的代码。

代码：1

google.visualization.events.addListener(chart,'click',function(){
        alert ('click');
    });

代码：2

google.visualization.events.trigger(dataTable, 'select', selectHandler);
    function selectHandler() {
      alert('A table row was selected');
    }

任何解决它们的提示将不胜感激。

Answer 1

calendar events 包括'select'，但没有'click'...

要使用'select'事件，必须将监听器添加到chart，
在绘制之前。

看下面的例子...

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({type: 'date', id: 'Date'});
    dataTable.addColumn({type: 'number', id: 'Events Found'});

    dataTable.addRows([
      [ new Date(2016, (05-1), 19), 400],
      [ new Date(2016, 02, 23), 300],
      [ new Date(2016, 05, 24), 300],
      [ new Date(2016, 06, 23), 300]
    ]);

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

    var options={
      title: 'Event Calendar',
      calendar: {
        focusedCellColor: {
          stroke: 'red',
          strokeOpacity: 0.8,
          strokeWidth: 3
        },
        underYearSpace: 2,
        yearLabel: {
          fontName: 'Times-Roman',
          fontSize: 32,
          color: '#e6ecff',
          bold: true,
          italic: true
        }
      },
    };

    google.visualization.events.addListener(chart, 'select', function () {
      document.getElementById('msg_div').innerHTML = JSON.stringify(chart.getSelection());
    });

    chart.draw(dataTable, options);
  },
  packages:['calendar']
});

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