Google Charts表页面事件不侦听

Question

当用户尝试更改Google表中的页面时，试图执行操作。

        var table = new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'table-div',
            'options': {
                'width': '100%',
                'allowHtml': true,
                'page': 'event',
                'pageSize': 15,
                'sortColumn': 0,
                'sortAscending': false
            },
            'view': {
                'columns': [0, 3, 1, 2, 4, 5, shareColumn]
            }
        });
        google.visualization.events.addListener(table, 'page', function(){console.log("1 test");});
        google.visualization.events.addListener(table, 'ready', function(){console.log("2 test");});
        dashboard.bind(filter, [chart, table]);

表格良好，数据加载，即将执行的侦听器，但是当我更改页面时，其他侦听器不会执行。是什么原因引起的？

Answer 1

发现页面侦听器没有被调用。

        google.visualization.events.addListener(table, 'ready', function(){
            google.visualization.events.addListener(table.getChart(), 'page', function(e){
                console.log("On page: " + e.page);
            });
        });

通过调用添加表实际上读取表并成功地添加了表并有效。

Answer 2

使用addListener和'ready'事件时要小心，
'ready'每次都被称为图表。
例如，使用绑定过滤器时。

因此，'page'侦听器将被多次添加/执行。

以下示例改用addOneTimeListener演示。

在下面运行摘要，使用范围过滤器，然后单击"页面"按钮之一。

每次使用过滤器时，执行次数都会增加...

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable({
      cols: [
        {label: 'Month', type: 'string'},
        {label: 'Amount', type: 'number'}
      ],
      rows: [
        {c:[{v: 'April'}, {v: 279899811.34}]},
        {c:[{v: 'May'}, {v: 205855811}]},
        {c:[{v: 'June'}, {v: 10009811}]},
        {c:[{v: 'July'}, {v: 79979811}]},
        {c:[{v: 'August'}, {v: 175789911}]},
        {c:[{v: 'September'}, {v: 99899811}]},
        {c:[{v: 'October'}, {v: 149899811}]},
        {c:[{v: 'November'}, {v: 80899811}]},
        {c:[{v: 'December'}, {v: 60899811}]},
        {c:[{v: 'January'}, {v: 225899811}]},
        {c:[{v: 'February'}, {v: 148899811}]},
        {c:[{v: 'March'}, {v: 150899811}]}
      ]
    });
    var table = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'table-div',
      'options': {
        'width': '100%',
        'allowHtml': true,
        'page': 'event',
        'pageSize': 4,
        'sortColumn': 0,
        'sortAscending': false
      }
    });
    var filter = new google.visualization.ControlWrapper({
      'controlType': 'NumberRangeFilter',
      'containerId': 'filter-div',
      'options': {
        'filterColumnIndex': 1,
        'ui': {
          'labelStacking': 'vertical',
          'allowTyping': false,
          'allowMultiple': true
        }
      }
    });
    var i = 0;
    google.visualization.events.addListener(table, 'ready', function(){
      google.visualization.events.addListener(table.getChart(), 'page', function(){
        i++;
        document.getElementById('msg-div0').innerHTML = 'addListener = ' + i;
      });
    });
    var x = 0;
    google.visualization.events.addOneTimeListener(table, 'ready', function(){
      google.visualization.events.addListener(table.getChart(), 'page', function(){
        x++;
        document.getElementById('msg-div1').innerHTML = 'addOneTimeListener = ' + x;
      });
    });
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
    dashboard.bind(filter, table);
    dashboard.draw(dataTable);
  },
  packages: ['controls', 'table']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <div id="filter-div"></div>
  <div id="table-div"></div>
  <div id="msg-div0"></div>
  <div id="msg-div1"></div>
</div>