如何使用谷歌图表api控制包装头列过滤器

How to use Google Charts api Control Wrapper for header column filter?

本文关键字：包装 过滤器 控制 api 何使用 谷歌      更新时间：2023-09-26

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

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':

在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();
相关文章：