google-visualization - 如何使用服务器端填充数据为表添加搜索过滤器

Question

我已经创建了带有服务器端数据填充的谷歌可视化表（在 PHP 中创建的 Json 并返回到数据表）。如何为此表添加搜索过滤器？我 在可视化游乐场看到了示例代码。它显示了使用 Control Wrapper 和 Chart Wrapper。那么如何为我的 DataTable（从 PHP 返回的 Json 数据）应用这个控件包装？

function drawmsgtable(users)
    {
        var msgdata = $.ajax({
            url: "http://mysite/phpscripts/msgtable.php?users="+users+"",
            dataType:"json",
            async: false
        }).responseText;
        var messagedatatable = new google.visualization.DataTable(msgdata);

        var options={'backgroundColor': 'transparent', 'width': 'auto'};
        $('#table_div').empty();
        var msgTable = new google.visualization.Table(document.getElementById('table_div'));
        msgTable.draw(messagedatatable, options);
    }

Answer 1

首先，您需要加载“控件”包

google.load('visualization', '1', {packages: ['controls']}); 

然后，您需要将 Table 对象转换为 ChartWrapper 对象，并添加一个 Dashboard 对象和 ControlWrapper 对象（以及 HTML div 来保存它们 - Dashboard div 应该包含控件和表格 div，但并非绝对必须拥有就是这样）。您将控件绑定到仪表板中的表格并绘制仪表板

function drawmsgtable(users) {
    var msgdata = $.ajax({
        url: "http://mysite/phpscripts/msgtable.php?users=" + users + "",
        dataType: "json",
        async: false
    }).responseText;
    var messagedatatable = new google.visualization.DataTable(msgdata);

    var options = {
        backgroundColor: 'transparent',
        width: 'auto'
    };

    $('#table_div').empty();

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

    var msgTable = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'table_div',
        options: options
    });

    var control = new google.visualization.ControlWrapper({
        chartType: 'StringFilter',
        containerId: 'table_div',
        options: {
             filterColumnIndex: 0
        }
    });

    dashboard.bind([control], [msgTable]);
    dashboard.draw(messagedatatable);
}​ 

示例 HTML：

<div id="dash">
    <div id="control_div"></div>
    <div id="table_div"></div>
</div>​​​​​​​​​​​​​

如果您希望能够过滤多个列，则需要为要过滤的每一列添加额外的控件。