cómo ocultar la columna en la tabla de gráficos de google

Question

Tengo un Google Charts Table que muestra un par de columnas y filas. Digamos, por ejemplo, que tenemos 4 columnas (A, B, C, D, respectivamente). ¿Cómo podría todavía cargar los valores de la columna C, pero solo ocultar la columna para que no se muestre?

¡Gracias de antemano!

Answer 1

En lugar de dibujar el DataTable, debe crear un objeto DataView intermedio donde se filtran los datos originales. Algo como esto:

//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); 

El método hideColumns es tal vez mejor en lugar de setColumns, elígete a ti mismo!

Cheers

Answer 2

Puede hacerlo con CSS.

"#table_div" es el div en el que está incluida mi tabla. Lo uso porque hay varias tablas en la misma página.

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

que también tienen un controlador de eventos en las filas de la tabla, y todavía se puede recoger los datos de la columna oculta.

Answer 3

Aquí hay una alternativa usando un ChartWrapper en lugar de un gráfico.

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(); 

Si utiliza un ChartWrapper, usted puede agregar fácilmente una función para cambiar las columnas ocultas, o mostrar todas las columnas. Para mostrar todas las columnas, pase null como el valor de 'columns'. Por ejemplo, usando 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(); 
}); 

En su html,

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

(Nota:. eval utilizado para la concisión utilizar lo que se adapte a su código es el punto..)

Answer 4

Si desea utilizar un valor de columna particular en el contenedor de control, pero no desea mostrar esa columna en Google Charts y luego hacer lo siguiente.

1) Agregue todas las columnas a su tabla de datos de gráficos de Google.
2) Agregue los siguientes elementos a opciones de su chartWrapper.

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

3) En la serie de códigos de arriba, 0 significa la primera línea en su gráfico de líneas. Por lo tanto, establecerá el color en blanco y también ocultará el nombre de la columna en Legends.

4) De esta forma no es la forma correcta de ocultar columnas, se recomienda el uso de DataView. Siempre que desee utilizar los datos en la tabla de datos para agregar controles a su gráfico, pero no desea mostrar esa columna en el cuadro, este es el camino.