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

Funciones obsoletas

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

  1. Descripción general
  2. Ejemplo
  3. Cargando
  4. Formato de datos
  5. Opciones de configuración
  6. Métodos
  7. Eventos
  8. Política de Datos

Descripción general

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

Por: Google

Ejemplo

Codifícalo tú mismo en la Visualización de Playground.

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["barchart"]});
      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.BarChart(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 "barchart" 

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

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

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

Formato de los datos

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

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

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

Opciones de configuración

Nombre Tipo Predeterminado Descripción
axisColor string o un objeto color predeterminado El color del eje. Los valores posibles son los de la opción de configuración backgroundColor.
axisBackgroundColor string o un objeto 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 Tamaño de fuente del texto del eje del gráfico, en píxeles.
FondoColor string o un objeto color predeterminado El color de fondo para el área principal del gráfico Puede ser una de las siguientes opciones:
  • Una string de un color compatible con HTML, por ejemplo, “rojo” o “#00cc00”
  • Un objeto con propiedades stroke fill y strokeSize. stroke y fill deben ser una string con un color. strokeSize es un número. Por ejemplo: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}. Para usar solo el relleno, sin un trazo, usa stroke:null, strokeSize: 0.
Color de borde string o un objeto color predeterminado El borde que rodea los elementos del gráfico Los valores posibles son los de la opción de configuración backgroundColor.
colores Arreglo de objetos o strings Colores predeterminados

Un arreglo de colores, en el que cada elemento especifica el color de una serie. Debes especificar un elemento de arreglo para cada serie.

  • Si es is3D=false, este es un array de colores HTML. Ejemplo: color:['#00FF00','orange']
  • 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 rostro del elemento y darker es el color del tono. Sin embargo, si especificas un color HTML para un objeto 3D, el rostro y el matiz serán del mismo color, y el efecto 3D se reducirá. Ejemplo: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
Habilítala boolean true Si se establece como verdadera, se muestra información sobre la herramienta cuando el usuario hace clic en una barra.
FocusBorderColor string o un objeto color predeterminado El borde de los elementos del gráfico que están en foco (con el mouse). Los valores posibles son los de la opción de configuración backgroundColor.
alto número Altura del contenedor Altura del gráfico en píxeles.
is3D; boolean falso Si se establece como verdadera, muestra un cambio tridimensional.
está apilado boolean falso Si se establece como verdadera, se apilan los valores de línea (acumulados).
leyenda string '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": sobre el gráfico.
  • "bottom": debajo del gráfico
  • "none": no se muestra ninguna leyenda.
Color de fondo de la leyenda string o un objeto color predeterminado El color de fondo para el área de leyenda del gráfico Los valores posibles son los de la opción de configuración backgroundColor.
Tamaño de fuente número automático El tamaño en píxeles de la fuente de la leyenda
Color de leyenda string o un objeto color predeterminado El color del texto de la leyenda Los valores posibles son los de la opción de configuración backgroundColor.
logScale boolean falso Si es verdadero, el eje principal se debe escalar de manera logarítmica.
máx. 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 dos valores: el valor de opción máximo, o el valor de datos más alto, redondeado a 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 valor más bajo de dos valores: el valor de opción mín., o el valor de datos más bajo, redondeado a la siguiente marca de cuadrícula inferior.
Eje inverso boolean true Si se establece como verdadera (la opción predeterminada), las categorías se dibujarán de arriba abajo. Si la estableces como falsa, las barras se dibujarán de abajo hacia arriba.
Categorías de programa boolean true Si esta preferencia se establece como "true", se mostrarán las etiquetas de categoría. Si es falso, no será así.
title string sin título Texto para mostrar arriba del gráfico
títuloX string sin título Texto para mostrar debajo del eje horizontal
títuloY string sin título Texto que se mostrará en el eje vertical
Color de título string o un objeto color predeterminado El color del título del gráfico. Los valores posibles son los de la opción de configuración backgroundColor.
Tamaño de fuente de título 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 la información sobre la herramienta Esto puede reducirse si la información sobre la herramienta es demasiado pequeña para incluir el texto en la fuente especificada.
Información sobre la altura
 número 60 Corresponde a la altura, en píxeles, de la información sobre la herramienta. La altura de la información sobre la herramienta es fija; nunca aumentará ni se reducirá para ajustarse al tamaño de la fuente o del texto. Sin embargo, se recortará cualquier altura superior a 1/3 de la altura del gráfico.
Información sobre la herramienta número 120 Ancho en píxeles de la información sobre la herramienta. El ancho de la información sobre la herramienta es fijo; nunca aumentará ni reducirá para adaptarse a la longitud o el tamaño de la fuente del texto. Sin embargo, se recortará cualquier ancho superior al ancho del gráfico.
ancho número Ancho del contenedor 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() Arreglo de elementos de selección Implementación estándar getSelection() Los elementos seleccionados son elementos de columna y celda. El usuario solo puede seleccionar una columna o celda a la vez.
setSelection() ninguno Implementación estándar 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 la columna de etiquetas no se puede seleccionar.

Eventos

Nombre Descripción Propiedades
onmouseover Se activa cuando el usuario desplaza el mouse sobre una barra y pasa los índices de fila y columna de la celda correspondiente. fila, columna
onmouseout Se activa cuando el usuario se aleja de una barra y pasa los índices de fila y columna de la celda correspondiente. fila, columna
ready El gráfico está listo para las llamadas a métodos externos. 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 y llamarlo solo después de que se active 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é elementos se seleccionaron, llama a getSelection(). Ninguno

Política de Datos

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