Как скрыть столбец в таблице google charts

Ответ 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, выберите себя!

Приветствия

Ответ 2

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

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

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

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

Ответ 3

Здесь альтернатива, использующая 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 используется для краткости. Используйте то, что подходит вашему коду. Это рядом с точкой.)

Ответ 4

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

1) Добавьте все столбцы в таблицу данных ваших графических карт.
2) Добавьте следующие параметры в параметры вашего графика.

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

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

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