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.
Descripción general
Un gráfico de áreas que se procesa en el 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.
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:["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 los datos
La primera columna debe ser una string y contener la etiqueta de la categoría. Puede seguir 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 | 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:
|
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 strings | Colores predeterminados | Los colores que se usarán para los elementos del gráfico. Un arreglo de strings. Cada elemento es una string de un color compatible con HTML, por ejemplo, "rojo" o "#00cc00". |
Habilítala | boolean | true | Si se establece como verdadera, se muestra información sobre la herramienta cuando el usuario hace clic en un dato. |
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. |
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:
|
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. |
Tamaño de línea | número | 2 | Ancho de línea en píxeles. Usa cero para ocultar todas las líneas y mostrar solo los puntos. |
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. |
tamaño_punto | número | 3 | Tamaño de los puntos que se muestran en píxeles Usa cero para ocultar todos los puntos. |
Eje inverso | boolean | falso | Si se establece como verdadera, las categorías se dibujarán de derecha a izquierda. La configuración predeterminada es dibujar de izquierda a derecha. |
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 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 fila y columna de la celda correspondiente. | fila, columna |
onmouseout |
Se activa cuando el usuario se aleja del mouse 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 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é 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.