Google столбец диаграммы фильтрации

Question

Я пытаюсь фильтровать строки столбцов диаграммы Google и с помощью кода совместно здесь в Google Charts-Code for Category Filter

Это все работает хорошо, однако у меня есть число столбцов и хотели бы иметь начало диаграммы с только отображается один столбец и позволяет пользователю добавлять в любой из дополнительных столбцов по мере необходимости.

Что я нашел, так это то, что если я буду играть с переменной initState, чтобы установить его в один столбец, который я хочу отобразить на начальном этапе, он будет иметь этот столбец, показанный в разделе селектора, но все же отображает все столбцы первоначально, пока я выберите дополнительный столбец, когда он скрывает остальные, и отображает только те два, которые я выбрал.

Итак, я попытался отключив эту часть кода:

// put the columns into this data table (skip column 0)<br> 
for (var i = 1; i < data.getNumberOfColumns(); i++) { 
columnsTable.addRow([i, data.getColumnLabel(i)]); 
initState.selectedValues.push(data.getColumnLabel(i)); 
} 

и заменить его

columnsTable.addRow([1, data.getColumnLabel(16)]); 
initState.selectedValues.push(data.getColumnLabel(16)); 

который устанавливает столбец я после (столбец 16) в качестве выбранного столбца в списке выбора, но удаляет другие столбцы из списка доступных столбцов и все еще отображает все 16 столбцов.

Как я могу установить это, чтобы изначально отображать данные одного выбранного столбца, но все же дает возможность выбирать другие столбцы из селектора?

Answer 1

Вы хотите сохранить вызов columnstable.addRow внутри цикла for, поскольку он заполняет DataTable, используемый для предоставления списка столбцов. Вы можете установить переменную selectedValue, как у вас есть:

// put the columns into this data table (skip column 0)<br> 
for (var i = 1; i < data.getNumberOfColumns(); i++) { 
    columnsTable.addRow([i, data.getColumnLabel(i)]); 
} 
initState.selectedValues.push(data.getColumnLabel(16)); 

Для того, чтобы сделать схему рисовать правильно с первоначальным выбором, нам нужно сделать небольшую корректировку структуры, помещая весь код обновления в его собственные функции, а затем вызвать, что по мере необходимости:

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

setChartView(); 

Вот рабочий пример: http://jsfiddle.net/asgallant/WaUu2/157/.