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);
            });
        });

通过在实际读取表格之后调用add，成功添加并运行。

Answer 2

使用addListener和'ready'事件时要小心每次重新绘制图表时都会调用'ready' 例如，当使用绑定过滤器时。

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

以下示例演示了如何使用addOneTimeListener。

运行下面的代码段，使用范围过滤器，然后单击其中一个页面按钮。

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

＆＃13;

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']
});

＆＃13;

<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>

＆＃13;

Google Charts表页事件不听

2 个答案: