Question

编辑：感谢asgallant解决了。请参阅下面的答案。

这是我的第一个问题，我对编程很新，我希望能在这里找到答案。

我正在尝试使用Google Visualization API创建一个信息中心，以显示一个表和一个搜索框，以搜索工作正常的用户名。

但是我想将名字和姓氏分成两列，以便它们可以按名字或姓氏排序，但在搜索框中我希望能够搜索任何一个名称。

由于StringFilter无法搜索多个列，因此我创建了另一个列，它将两个名称组合在一起并将其绑定到StringFilter。到目前为止一切都很好。

现在我想隐藏在表中组合名字和姓氏的列，但仍然可以使用StringFilter来搜索该隐藏列。

在本网站以及其他网站上搜索了很多内容之后，我无法找到问题的解决方案。看起来这应该可以使用DataView，但我无法让它工作。使用DataView隐藏工作正常但是一旦隐藏了列，我就会收到一个错误，说StringFilter选项'filterColumnIndex'应该在0-4范围内，因为第5列是隐藏的。

我已经用dashboard.draw(view, options: {view: [0,1,2,3,4]});试过了和dashboard.draw(view, options: {data: [0,1,2,3,4]});

这甚至可能吗？任何帮助，将不胜感激！谢谢你的时间。

到目前为止，这是我的代码：

function DrawDashboard() {
            $.ajax({
                url: "/report/toverview/rest/router.php/user/",
                dataType: 'json'
            }).done(function (result) {

                //------------------------------------------------------------------//
                // Create and populate the data table.
                //------------------------------------------------------------------//
                var data = new google.visualization.DataTable();
                data.addColumn('number', 'ID');
                data.addColumn('string', 'TU-ID');
                data.addColumn('string', 'Vorname');
                data.addColumn('string', 'Nachname');
                data.addColumn('string', 'E-Mail');
                data.addColumn('string', 'FullName')
                var array = new Array();
                result = result.Records;
                //console.log(result);
                $.each(result, function(id, felder) {
                    //console.log(felder);

                    var subarray = new Array();
                    subarray.push(parseInt(felder.id));
                    subarray.push(felder.username);
                    subarray.push(felder.firstname);
                    subarray.push(felder.lastname);
                    subarray.push(felder.email);
                    subarray.push(felder.firstname + ' ' + felder.lastname);
                    array.push(subarray);
                });
                data.addRows(array);

                //------------------------------------------------------------------//
                // Create a search box to search for the user name.
                //------------------------------------------------------------------//
                var stringFilter = new google.visualization.ControlWrapper({
                    controlType: 'StringFilter',
                    containerId: 'string_filter_div_nutzer',
                    options: {
                        filterColumnIndex: 5,
                        matchType: 'any',
                        ui: {
                            label: 'Nutzer suchen:'
                        }
                    }
                });

                //------------------------------------------------------------------//
                // Create the table to display.
                //------------------------------------------------------------------//
                var table = new google.visualization.ChartWrapper({
                    chartType: 'Table',
                    containerId: 'table_div_nutzer',
                    options: {
                        showRowNumber: false,
                        page: 'enable',
                        pageSize: 25
                    }
                });

                var view = new google.visualization.DataView(data);
                //view.setColumns([0,1,2,3,4]);
                //view.hideColumns([5]);


                //------------------------------------------------------------------//
                // Create a dashboard.
                //------------------------------------------------------------------//
                var dashboard = new google.visualization.Dashboard(document.getElementById('dashboardUser'));

                //------------------------------------------------------------------//
                // Establish dependencies.
                //------------------------------------------------------------------//
                dashboard.bind([stringFilter], [table]);

                //------------------------------------------------------------------//
                // Draw the dashboard.
                //------------------------------------------------------------------//
                dashboard.draw(view);
            });
        };

Answer 1

您需要在Table的ChartWrapper中设置视图，而不是在调用dashboard.draw时设置：

var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table_div_nutzer',
    options: {
        showRowNumber: false,
        page: 'enable',
        pageSize: 25
    },
    view: {
        columns: [0, 1, 2, 3, 4]
    }
});

然后使用您的DataTable绘制仪表板：

dashboard.draw(data);

Google可视化 - 在表中隐藏列，该表是仪表板的一部分，但仍然可以使用基础数据进行StringFilter

1 个答案: