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

Visualización: gráfico de áreas (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.

Descripción general

Un gráfico de áreas 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.

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:["areachart"]});
      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.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

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

Cargando

El nombre del paquete google.load es "areachart".

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

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

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

Formato de datos

La primera columna debe ser una cadena y contener la etiqueta de la categoría. Puede ir seguida de cualquier cantidad de columnas. Todas deben ser numéricas. Cada columna se muestra como una línea separada.

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	Arreglo de strings	Colores predeterminados	Los colores que se usarán para los elementos del gráfico. Un array de cadenas. Cada elemento es una cadena que es un color admitido por HTML, por ejemplo "rojo" o "#00cc00".
enableTooltip	boolean	verdadero	Si se establece como verdadera, se muestran cuadros de información cuando el usuario hace clic en un dato.
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.
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 del texto de la leyenda Los valores posibles son los de la opción de configuración backgroundColor.
lineSize	número	2	Es el ancho de línea en píxeles. Usa el cero para ocultar todas las líneas y mostrar solo los puntos.
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.
pointSize	número	3	Es el tamaño de los puntos mostrados en píxeles. Usa el cero para ocultar todos los puntos.
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 supere 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á cualquier valor que supere 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 un punto y pasa los índices de filas y columnas de la celda correspondiente.	fila, columna
`onmouseout`	Se activa cuando el usuario aleja el mouse de un punto 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 un punto o una leyenda. Cuando se selecciona un punto, 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 áreas (versión anterior) Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.