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

Question

У меня есть Google Charts Table, который отображает пару столбцов и строк. Скажем, например, у нас есть 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, выберите себя!

Cheers

Answer 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; 
} 

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

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

Answer 4

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

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

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

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

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