javascript - 如何使用 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();