如何使用Google Charts api Control Wrapper进行标题列过滤？

Question

在我的脚本中,我将一系列名称值添加到数据列.如下

for (var colmnName in MyResultHeader){
     data.addColumn('number', colmnName);

}

我希望用户能够按这些列进行过滤,例如

A  | B | C  | D
12 | 2 | 21 | 32
43 | 12| 23 | 21

如何添加具有下拉列表的过滤器(A,B,C,D),因此所选列将显示在图表上？

ControlWrapper强制我们提到选项':'filterColumnIndex':

Answer 1

Google Charts中没有直接支持让开发人员构建控件,以便用户可以选择列,但您可以使用CategoryFilter构建它,如Andrew Gallant在此示例中所示:http://jsfiddle.net/asgallant/WaUu2/

以下是这个想法的本质:

var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
// put the columns into this data table (skip column 0)
for (var i = 1; i < data.getNumberOfColumns(); i++) {
    columnsTable.addRow([i, data.getColumnLabel(i)]);
    initState.selectedValues.push(data.getColumnLabel(i));
}

var columnFilter = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'colFilter_div',
    dataTable: columnsTable,
    options: {
        filterColumnLabel: 'colLabel',
        ui: {
            label: 'Columns',
            allowTyping: false,
            allowMultiple: true,
            selectedValuesLayout: 'belowStacked'
        }
    },
    state: initState
});

google.visualization.events.addListener(columnFilter, 'statechange', function () {
    var state = columnFilter.getState();
    var row;
    var columnIndices = [0];
    for (var i = 0; i < state.selectedValues.length; i++) {
        row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
        columnIndices.push(columnsTable.getValue(row, 0));
    }
    // sort the indices into their original order
    columnIndices.sort(function (a, b) {
        return (a - b);
    });
    chart.setView({columns: columnIndices});
    chart.draw();
});

columnFilter.draw();