2

私のスクリプトでは、一連の名前と値をデータ列に追加します。次のように

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

4

1 に答える 1

7

ユーザーが列を選択できるように開発者がコントロールを作成できるようにするための Google Charts の直接的なサポートはありませんが、Andrew Gallant による次の例に示すように、CategoryFilter を使用して作成できます: 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();
于 2013-06-18T16:25:59.167 に答える