Google 可视化仪表板：getChart() 空对象答案

【问题标题】：Google Visualization Dashboard: getChart() null objectGoogle 可视化仪表板：getChart() 空对象
【发布时间】：2014-06-27 10:37:36
【问题描述】：

在谷歌可视化中，我实现了一个仪表板，带有一个表格和一些控件过滤器。

在 html 中，我添加了一个按钮，当我单击该按钮时，我想要获取所有选定的行：问题是函数 getChart() 返回一个空对象：为什么？

我必须在哪里实现 onclick 功能？

google.load('visualization', '1.0', {'packages':['controls', "corechart"]});
google.setOnLoadCallback(drawDashboard);

function drawDashboard() {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Status');

    data.addRows([
      ['Customer1', 'Active'],
      ['Customer2', 'Blocked'],
    ]);

    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

    var stringNameFilter = new google.visualization.ControlWrapper({
        'controlType': 'StringFilter',
        'containerId': 'filterName_div',
        'options': {
          'filterColumnIndex': 0,
          'ui': {
            'label': '',
            }
        }
     });

    // Define a table
    var table = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'table_div',
      'options': {
          'allowHtml': true,
      }

    });

    dashboard.bind(stringNameFilter, table);
    dashboard.draw(data);

    document.getElementById("btn_solicit").onclick = function() {
        var tmpData = table.getChart();
                    ...

    };

}

【问题讨论】：

标签： javascript jquery html google-visualization

【解决方案1】：

getChart 方法将返回null，直到由 ChartWrapper 包装的可视化完成绘制。尝试将事件处理程序代码包装在一次性“就绪”事件侦听器中：

google.visualization.events.addOneTimeListener(table, 'ready', function () {
    document.getElementById("btn_solicit").onclick = function() {
        var tmpData = table.getChart();
        // ...
    };
});

将其放置在创建 table 之后但在调用 dashboard.draw 之前。

【讨论】：