Se usó la API de Cloud Translation para traducir esta página.

Visualización: Gráfico de columnas (versión anterior)

Obsoleto

Esta visualización se reemplazó por una versión nueva. Úsala en su lugar. Para facilitar la migración, consulta la página de notas de la versión.

Overview
Ejemplo
Cargando
Formato de los datos
Opciones de configuración
Métodos
Eventos
Política de Datos

Descripción general

Un gráfico de barras verticales que se renderiza en el navegador mediante SVG o VML. Muestra sugerencias al hacer clic en puntos. Anima las líneas cuando haces clic en las entradas de la leyenda. Para obtener una versión horizontal de este gráfico, consulta el gráfico de barras.

Por: Google

Ejemplo

Codificala tú mismo en el Playground de visualización.

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["columnchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Cargando

El nombre del paquete google.load es "columnchart"

  google.load("visualization", "1", {packages: ["columnchart"]});

El nombre de clase de la visualización es google.visualization.ColumnChart

  var visualization = new google.visualization.ColumnChart(container);

Formato de datos

Cada fila de la tabla representa un grupo de barras adyacentes.

La primera columna de la tabla debe ser una cadena y representa la etiqueta de ese grupo de barras. Puede seguir cualquier cantidad de columnas, todas numéricas, cada una de las cuales representa las barras con el mismo color y posición relativa en cada grupo.

El valor en una fila y columna determinadas controla la altura de la única barra representada por esa fila y esta columna.

Opciones de configuración

Nombre	Tipo	Predeterminado	Descripción
axisColor	Objeto o string	color predeterminado	El color del eje. Los valores posibles son los de la opción de configuración backgroundColor.
axisBackgroundColor	Objeto o string	color predeterminado	El borde alrededor del fondo del eje. Los valores posibles son los de la opción de configuración backgroundColor.
axisFontSize	número	automático	Es el tamaño de fuente del texto del eje del gráfico, en píxeles.
backgroundColor	Objeto o string	color predeterminado	El color de fondo del área principal del gráfico. Puede ser una de las siguientes opciones: Cadena de color compatible con HTML, por ejemplo "rojo" o "#00cc00" Un objeto con las propiedades `stroke` `fill` y `strokeSize`. `stroke` y `fill` deben ser una cadena con un color. administrarSize es un número. Por ejemplo: `{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}`. Para usar solo relleno, sin un trazo, usa `stroke:null, strokeSize: 0`.
borderColor	Objeto o string	color predeterminado	El borde alrededor de los elementos del gráfico. Los valores posibles son los de la opción de configuración backgroundColor.
colores	Array de objetos o cadenas	Colores predeterminados	Una matriz de colores, en la que cada elemento especifica el color de una serie. Debes especificar un elemento de array para cada serie. Si es `is3D=false`, se trata de un array de colores HTML. Ejemplo: colores:['#00FF00','naranja'] Si es `is3D=true`, es un array de colores HTML o de objetos de este tipo: `{color:face_color, darker:shade_color}`, en el que `color` es el color de la cara del elemento y `darker` es el color de la sombra. Sin embargo, si especificas un color HTML para un objeto 3D, el rostro y el tono serán del mismo color, y se reducirá el efecto 3D. Ejemplo: `{is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}`
enableTooltip	boolean	verdadero	Si se establece como verdadera, se muestran cuadros de información cuando el usuario hace clic en una columna.
focusBorderColor	Objeto o string	color predeterminado	El borde alrededor de los elementos del gráfico que están enfocados (señalado por el mouse). Los valores posibles son los de la opción de configuración backgroundColor.
height	número	Altura del contenedor	Es la altura del gráfico en píxeles.
is3D	boolean	false	Si se establece como verdadero, muestra un cambio tridimensional.
isStacked	boolean	false	Si se configura como verdadera, los valores de línea se apilan (acumulan).
leyenda	cadena	'derecha'	Posición y tipo de leyenda. Puede ser una de las siguientes opciones: "right": a la derecha del gráfico. "left": se encuentra a la izquierda del gráfico. “top”: se encuentra encima del gráfico. "parte inferior": se encuentra debajo del gráfico. "none": No se muestra ninguna leyenda.
legendBackgroundColor	Objeto o string	color predeterminado	El color de fondo del área de la leyenda del gráfico. Los valores posibles son los de la opción de configuración backgroundColor.
legendFontSize	número	automático	El tamaño de la fuente de la leyenda en píxeles.
legendTextColor	Objeto o string	color predeterminado	El color de las entradas de texto de la leyenda. Los valores posibles son los de la opción de configuración backgroundColor.
logScale	boolean	false	Si es verdadero, el eje principal debe escalarse de manera logarítmica.
max	número	automático	Especifica la línea de cuadrícula del eje Y más alta. La línea de cuadrícula real será el mayor de los dos valores: el valor máximo de la opción o el valor de datos más alto, redondeado hasta la siguiente marca de cuadrícula más alta.
min	número	automático	Especifica la línea de cuadrícula del eje Y más baja. La línea de cuadrícula real será el inferior de los dos valores: el valor mínimo de la opción o el valor de datos más bajo, redondeado hacia abajo a la siguiente marca de la cuadrícula inferior .
reverseAxis	boolean	false	Si se establece como verdadera, se dibujarán categorías de derecha a izquierda. La configuración predeterminada es dibujar de izquierda a derecha.
showCategories	boolean	verdadero	Si esta preferencia se establece como "true", se mostrarán etiquetas de categorías. Si es falsa, no lo hará.
título	cadena	sin título	Es el texto que se mostrará sobre el gráfico.
titleX	cadena	sin título	Texto que se mostrará debajo del eje horizontal
titleY	cadena	sin título	Texto que se mostrará en el eje vertical.
titleColor	Objeto o string	color predeterminado	El color del título del gráfico. Los valores posibles son los de la opción de configuración backgroundColor.
titleFontSize	número	automático	El tamaño de fuente para el título del gráfico, en píxeles.
tooltipFontSize	número	11	El tamaño de fuente del texto de información sobre la herramienta. Esto se puede reducir si la información sobre la herramienta es demasiado pequeña para contener el texto en la fuente especificada.
tooltipHeight	número	60	La altura del cuadro de información en píxeles. La altura de la información es fija; nunca aumentará ni se reducirá para adaptarse a la longitud o al tamaño de la fuente del texto. Sin embargo, se recortará cualquier valor que sea superior a 1/3 de la altura del gráfico.
tooltipWidth	número	120	Es el ancho de la información sobre la herramienta en píxeles. El ancho de la información es fijo; nunca aumentará ni se reducirá para adaptarse a la longitud o al tamaño de la fuente del texto. Sin embargo, se recortarán los elementos que superen el ancho del gráfico.
width	número	Ancho del contenedor	Es el ancho del gráfico en píxeles.

Métodos

Método	Tipo de datos que se muestra	Descripción
`draw(data, options)`	ninguno	Dibuja el gráfico.
`getSelection()`	Array de elementos de selección	Implementación estándar de `getSelection()` Los elementos seleccionados son elementos de columna y celda. El usuario solo puede seleccionar una columna o celda a la vez.
`setSelection()`	ninguno	Es la implementación estándar de `setSelection()`, pero admite la selección de un solo elemento. Trata cada entrada de selección como una selección de columna o celda. Ten en cuenta que no se puede seleccionar la columna de etiquetas.

Eventos

Nombre	Descripción	Propiedades
`onmouseover`	Se activa cuando el usuario desplaza el mouse sobre una barra y pasa los índices de filas y columnas de la celda correspondiente.	fila, columna
`onmouseout`	Se activa cuando el usuario aleja el mouse de una barra y pasa los índices de filas y columnas de la celda correspondiente.	fila, columna
`ready`	El gráfico está listo para llamadas de método externas. Si deseas interactuar con el gráfico y llamar a los métodos después de dibujarlo, debes configurar un objeto de escucha para este evento antes de llamar al método `draw` e llamarlos solo después de que se haya activado el evento.	Ninguno
`select`	Se activa cuando el usuario hace clic en una barra o leyenda. Cuando se selecciona una barra, se selecciona la celda correspondiente en la tabla de datos; cuando se selecciona una leyenda, se selecciona la columna correspondiente en la tabla de datos. Para saber qué se seleccionó, llama a `getSelection()`.	Ninguno

Política de Datos

Todo el código y los datos se procesan y renderizan en el navegador. No se envían datos a ningún servidor.

Visualización: Gráfico de columnas (versión anterior) Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.