как скрыть столбец в таблице Google Maps

Question

У меня есть Таблица Google Charts , которая отображает пару столбцов и строк.Скажем, например, у нас есть 4 столбца (A, B, C, D соответственно).Как я мог бы по-прежнему загружать значения столбца C, но просто скрыть столбец, чтобы он не отображался?

Заранее спасибо!

Answer 1

Вместо того, чтобы рисовать DataTable, вы должны создать промежуточный объект DataView, где вы фильтруете исходные данные.Примерно так:

//dataResponse is your Datatable with A,B,C,D columns        
var view = new google.visualization.DataView(dataResponse);
view.setColumns([0,1,3]); //here you set the columns you want to display

//Visualization Go draw!
visualizationPlot.draw(view, options);

Возможно, лучше использовать метод hideColumns вместо setColumns, выберите сами!

Приветствия

Answer 2

Вот альтернатива, использующая ChartWrapper вместо диаграммы.

var opts = {
    "containerId": "chart_div",
    "dataTable": datatable,
    "chartType": "Table",
    "options": {"title": "Now you see the columns, now you don't!"}
}
var chartwrapper = new google.visualization.ChartWrapper(opts);

// set the columns to show
chartwrapper.setView({'columns': [0, 1, 4, 5]});    
chartwrapper.draw();

Если вы используете ChartWrapper, вы можете легко добавить функцию для изменения скрытых столбцов или показать все столбцы. Чтобы показать все столбцы, передайте null в качестве значения 'columns'. Например, используя jQuery,

$('button').click(function() {
    // use your preferred method to get an array of column indexes or null
    var columns = eval($(this).val());

    chartwrapper.setView({'columns': columns});    
    chartwrapper.draw();
});

В вашем html,

<button value="[0, 1, 3]" >Hide columns</button>
<button value="null">Expand All</button>

(Примечание: eval используется для краткости. Используйте то, что подходит вашему коду. Это не относится к делу.)

Answer 3

var view = new google.visualization.DataView(dataTable); //datatable contains col and rows
view.setColumns([0,1,3,4]); //only show these column
chart.draw(view, options); //pass the view to draw chat

Answer 4

Вы можете сделать это с помощью CSS.

"# table_div" - это div, в который обернута моя таблица. Я использую это, потому что на одной странице несколько таблиц.

#table_div .google-visualization-table table.google-visualization-table-table 
   td:nth-child(1),th:nth-child(1){
   display:none;
}

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

Answer 5

Если вы хотите использовать определенное значение столбца в оболочке элемента управления, но не хотите отображать этот столбец в Google Charts, выполните следующие действия.

1) Добавьте все столбцы в таблицу данных Google Maps.
2) Добавьте следующие вещи в опции вашего chartWrapper.

   // Set chart options
    optionsUser = {
        "series": {
            0: {
                color: "white",
                visibleInLegend: false
            }
        }
    };

3) В приведенной выше серии кодов 0 означает первую строку в вашем линейном графике.Таким образом, он установит белый цвет, а также скрыт имя столбца в легендах.

4) Этот способ не является правильным способом скрытия столбцов. Рекомендуется использовать DataView.Всякий раз, когда вы хотите использовать данные в таблице данных для добавления элементов управления на диаграмму, но не хотите показывать этот столбец на диаграмме, это путь.