Descripción general
Un gráfico de áreas escalonado que se renderiza dentro del navegador con SVG o VML. Muestra sugerencias cuando se coloca el cursor sobre los pasos.
Un ejemplo simple
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Director (Year)', 'Rotten Tomatoes', 'IMDB'],
['Alfred Hitchcock (1935)', 8.4, 7.9],
['Ralph Thomas (1959)', 6.9, 6.5],
['Don Sharp (1978)', 6.5, 6.4],
['James Hawes (2008)', 4.4, 6.2]
]);
var options = {
title: 'The decline of \'The 39 Steps\'',
vAxis: {title: 'Accumulated Rating'},
isStacked: true
};
var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Algunas opciones comunes
Como todos los gráficos de Google, los gráficos de áreas escalonados tienen muchas opciones que se muestran aquí. A continuación, se incluye un ejemplo que muestra algunas de las más comunes:
En el gráfico anterior, cambiamos el color de fondo con backgroundColor, movimos la leyenda a la parte inferior con legend.position, quitamos las líneas verticales configurando connectSteps como falso y personalizamos los colores. A continuación, te mostramos cómo se realizó:
var options = {
backgroundColor: '#ddd',
legend: { position: 'bottom' },
connectSteps: false,
colors: ['#4374E0', '#53A8FB', '#F1CA3A', '#E49307'],
isStacked: true,
};
Gráficos de áreas apilados escalonados
Los gráficos de áreas escalonados también admiten el apilamiento, incluido el 100%. Un gráfico de áreas apiladas escalonado es un gráfico de áreas escalonado que coloca los valores relacionados uno sobre otro. Si hay valores negativos, se apilan en orden inverso debajo del modelo de referencia del gráfico. Para una pila del 100%, las pilas de elementos en cada valor de dominio se reescalan de modo que sumen un 100%. Las opciones para esto son isStacked: 'percent', que formatea cada valor como un porcentaje del 100%, y isStacked: 'relative', que formatea cada valor como una fracción de 1. También existe una opción isStacked: 'absolute', que es funcionalmente equivalente a isStacked: true.
Ten en cuenta que, en el gráfico apilado al 100% de la derecha, los valores de marca se escriben en función de la escala relativa de 0-1 como fracciones de 1.
var options_stacked = {
isStacked: true,
height: 300,
legend: {position: 'top', maxLines: 3},
vAxis: {minValue: 0}
};
var options_fullStacked = {
isStacked: 'relative',
height: 300,
legend: {position: 'top', maxLines: 3},
vAxis: {
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
Cargando
El nombre del paquete google.charts.load es "corechart".
google.charts.load("current", {packages: ["corechart"]});
El nombre de clase de la visualización es google.visualization.SteppedAreaChart.
var visualization = new google.visualization.SteppedAreaChart(container);
Formato de datos
Filas: Cada fila de la tabla representa un grupo de barras.
Columnas:
| Columna 0 | Columna 1 | ... | Columna N | |
|---|---|---|---|---|
| Objetivo: | Etiquetas de grupo del eje X | Valores de la barra 1 en este grupo | ... | Barra de valores N de este grupo |
| Tipo de datos: | cadena | número | ... | número |
| Role: | dominio | datos | ... | datos |
| Roles de columna opcionales: | ... |
Opciones de configuración
| Nombre | |
|---|---|
| aggregationTarget |
Cómo se agrupan varias selecciones de datos en cuadros de información:
A menudo,
aggregationTarget se usa junto con selectionMode y tooltip.trigger, p.ej.:
var options = {
// Allow multiple
// simultaneous selections.
selectionMode: 'multiple',
// Trigger tooltips
// on selections.
tooltip: {trigger: 'selection'},
// Group selections
// by x-value.
aggregationTarget: 'category',
};
Tipo: string
Configuración predeterminada: "auto"
|
| animation.duration |
Es la duración de la animación en milisegundos. Para obtener más detalles, consulta la documentación sobre animaciones. Tipo: Número
Valor predeterminado: 0
|
| animation.easing |
Es la función de aceleración aplicada a la animación. Están disponibles las siguientes opciones:
Tipo: string
Predeterminado: "lineal"
|
| animation.startup |
Determina si se animará el gráfico en el dibujo inicial. Si es Tipo: booleano
Predeterminado falso
|
| areaOpacity |
La opacidad predeterminada del área debajo del paso, donde 0.0 es completamente transparente y 1.0 es completamente opaco. No afecta la opacidad de la línea escalonada. Para obtener un gráfico de líneas escalonado, establece este valor en 0. Para especificar la opacidad de una serie individual, establece el valor Tipo: número, de 0.0 a 1.0
Valor predeterminado: 0.3
|
| axisTitlesPosition |
Es el lugar en el que se colocan los títulos de los ejes en comparación con el área del gráfico. Valores admitidos:
Tipo: string
Configuración predeterminada: "out"
|
| backgroundColor |
El color de fondo del área principal del gráfico. Puede ser una cadena simple de color HTML, por ejemplo: Tipo: objeto o cadena
Predeterminado: “white”
|
| backgroundColor.stroke |
El color del borde del gráfico, como una cadena de color HTML. Tipo: string
Predeterminado: “#666”
|
| backgroundColor.strokeWidth |
Es el ancho del borde en píxeles. Tipo: Número
Valor predeterminado: 0
|
| backgroundColor.fill |
El color de relleno del gráfico, como una cadena HTML de color. Tipo: string
Predeterminado: “white”
|
| chartArea |
Un objeto con miembros para configurar la posición y el tamaño del área del gráfico (donde se dibuja el gráfico, sin incluir los ejes ni las leyendas). Se admiten dos formatos: un número o un número seguido de %. Un número simple es un valor en píxeles; un número seguido de % es un porcentaje. Ejemplo: Tipo: objeto
Valor predeterminado: nulo
|
| chartArea.backgroundColor |
Color de fondo del área del gráfico Cuando se usa una cadena, puede ser una cadena hexadecimal (p.ej., “#fdc”) o un nombre de color en inglés. Cuando se usa un objeto, se pueden proporcionar las siguientes propiedades:
Tipo: objeto o cadena
Predeterminado: “white”
|
| chartArea.left |
Indica qué tan lejos se debe dibujar el gráfico desde el borde izquierdo. Tipo: número o string
Predeterminada: automática
|
| chartArea.top |
Indica qué tan lejos se debe dibujar el gráfico desde el borde superior. Tipo: número o string
Predeterminada: automática
|
| chartArea.width |
Ancho del área del gráfico. Tipo: número o string
Predeterminada: automática
|
| chartArea.height |
Altura del área del gráfico. Tipo: número o string
Predeterminada: automática
|
| colores |
Los colores que se usarán para los elementos del gráfico. Un array de cadenas, en el que cada elemento es una cadena de color HTML, por ejemplo: Tipo: Arreglo de cadenas
Predeterminado: Colores predeterminados
|
| connectSteps |
Si la estableces como verdadera, se conectarán los pasos para formar una línea escalonada. De lo contrario, solo aparecerá la línea superior. La opción predeterminada es conectar los escalones. Tipo: booleano
Predeterminado: verdadero
|
| enableInteractivity |
Si el gráfico arroja eventos basados en el usuario o reacciona a la interacción del usuario. Si es falso, el gráfico no arrojará "seleccionar" ni otros eventos basados en interacciones (pero sí arrojará eventos listos o de error), ni mostrará texto flotante ni cambiará según la entrada del usuario. Tipo: booleano
Predeterminado: verdadero
|
| focusTarget |
Es el tipo de entidad que recibe el foco cuando se coloca el cursor del mouse. También afecta qué entidad se selecciona con un clic del mouse y qué elemento de la tabla de datos está asociado con los eventos. Puede ser una de las siguientes opciones:
En el campo "category" (categoría) de FocusTarget, el cuadro de información muestra todos los valores de la categoría. Esto puede ser útil para comparar valores de diferentes series. Tipo: string
Predeterminado: "datum"
|
| fontSize |
El tamaño de fuente predeterminado, en píxeles, de todo el texto en el gráfico. Puedes anular esto usando propiedades para elementos específicos del gráfico. Tipo: Número
Predeterminada: automática
|
| fontName |
Es el tipo de fuente predeterminado para todo el texto del gráfico. Puedes anular esto usando propiedades para elementos específicos del gráfico. Tipo: string
Predeterminado: "Arial"
|
| forceIFrame |
Dibuja el gráfico dentro de un marco intercalado. (Ten en cuenta que, en IE8, esta opción se ignora; todos los gráficos de IE8 se dibujan en iframes). Tipo: booleano
Predeterminado: falso
|
| hAxis |
Un objeto con miembros para configurar varios elementos del eje horizontal. Para especificar las propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación:
{
title: 'Hello',
titleTextStyle: {
color: '#FF0000'
}
}
Tipo: objeto
Valor predeterminado: nulo
|
| hAxis.direction |
La dirección en la que crecen los valores a lo largo del eje horizontal. Especifica Tipo: 1 o -1
Configuración predeterminada: 1
|
| hAxis.textPosition |
Posición del texto del eje horizontal, en relación con el área del gráfico. Valores admitidos: “out”, “in”, “none”. Tipo: string
Configuración predeterminada: "out"
|
| hAxis.textStyle |
Un objeto que especifica el estilo de texto del eje horizontal. El objeto tiene este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| hAxis.ticks |
Reemplaza las marcas del eje X generadas automáticamente por el array especificado. Cada elemento del array debe ser un valor de marca válido (como un número, fecha, fecha y hora o timeofday) o un objeto. Si es un objeto, debe tener una propiedad
ViewWindow se expandirá automáticamente para incluir las marcas mínimas y máximas, a menos que especifiques Ejemplos:
Tipo: Arreglo de elementos
Predeterminada: automática
|
| hAxis.title |
La propiedad Tipo: string
Valor predeterminado: nulo
|
| hAxis.titleTextStyle |
Un objeto que especifica el estilo de texto del título del eje horizontal. El objeto tiene este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| hAxis.allowContainerBoundaryTextCutoff |
Si se establece como falso, se ocultarán las etiquetas más externas en lugar de permitir que el contenedor del gráfico las recorte. Si es verdadero, se permitirá el recorte de etiquetas. Tipo: booleano
Predeterminado: falso
|
| hAxis.slantedText |
Si es verdadero, dibuja el texto del eje horizontal en un ángulo para ayudar a que se ajuste más texto a lo largo del eje; si se establece como falso, dibuja el texto del eje horizontal en posición vertical. El comportamiento predeterminado es inclinar el texto si no puede caber todo cuando se dibuja en posición vertical. Ten en cuenta que esta opción solo está disponible cuando Tipo: booleano
Predeterminada: automática
|
| hAxis.slantedTextAngle |
El ángulo del texto del eje horizontal, si se dibuja inclinado. Se ignora si Tipo: número, de -90 a 90.
Valor predeterminado: 30
|
| hAxis.maxAlternation |
Cantidad máxima de niveles de texto en el eje horizontal. Si las etiquetas de texto del eje se sobrecargan demasiado, el servidor puede mover las etiquetas vecinas hacia arriba o hacia abajo para que las etiquetas quepan más juntas. Este valor especifica la mayor cantidad de niveles que se usarán. Si las etiquetas pueden caber sin superponerse, el servidor puede usar menos niveles. Para las fechas y horas, el valor predeterminado es 1. Tipo: Número
Valor predeterminado: 2
|
| hAxis.maxTextLines |
Cantidad máxima de líneas permitidas para las etiquetas de texto. Las etiquetas pueden abarcar varias líneas si son demasiado largas y, de forma predeterminada, la cantidad de líneas está limitada por la altura del espacio disponible. Tipo: Número
Predeterminada: automática
|
| hAxis.minTextSpacing |
Espaciado horizontal mínimo, en píxeles, permitido entre dos etiquetas de texto adyacentes. Si las etiquetas están demasiado densas o son demasiado largas, el espaciado puede caer por debajo de este umbral y, en este caso, se aplicará una de las medidas de limpieza de etiquetas (p. ej., truncar las etiquetas o descartar algunas de ellas). Tipo: Número
Predeterminado: El valor de
hAxis.textStyle.fontSize |
| hAxis.showTextEvery |
Cuántas etiquetas del eje horizontal mostrar, donde 1 significa mostrar todas las etiquetas, 2 significa mostrar todas las demás y así sucesivamente. De forma predeterminada, se intenta mostrar tantas etiquetas como sea posible sin superponerse. Tipo: Número
Predeterminada: automática
|
| hAxis.viewWindow |
Especifica el rango de recorte del eje horizontal. Tipo: objeto
Valor predeterminado: nulo
|
| hAxis.viewWindow.max |
El índice de fila basado en cero donde finaliza la ventana de recorte. Se recortarán los datos de este índice y
superiores. Junto con Se ignora cuando Tipo: Número
Predeterminada: automática
|
| hAxis.viewWindow.min |
El índice de fila basado en cero donde comienza la ventana de recorte. Se recortarán los datos de los índices inferiores a esta cifra. Junto con Se ignora cuando Tipo: Número
Predeterminada: automática
|
| height |
Altura del gráfico en píxeles. Tipo: Número
Predeterminado: la altura del elemento contenedor
|
| isStacked |
Si se configura como verdadera, apila los elementos de todas las series en cada valor de dominio. Nota: En los gráficos Column, Area y SteppedArea, los gráficos de Google revierten el orden de los elementos de la leyenda para que se correspondan mejor con la apilado de los elementos de la serie (p.ej., la serie 0 será el elemento de leyenda más bajo). Esto no se aplica a los gráficos de barras.
La opción Las opciones para
Para apilar el 100%, el valor calculado de cada elemento aparecerá en la información sobre la herramienta después de su valor real.
De forma predeterminada, el eje objetivo mostrará valores de marca basados en la escala relativa 0-1 como fracciones
de 1 para
La pila al 100% solo admite valores de datos de tipo Tipo: booleano/cadena
Predeterminado: falso
|
| leyenda |
Un objeto con miembros para configurar varios aspectos de la leyenda. Para especificar las propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación: {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Tipo: objeto
Valor predeterminado: nulo
|
| legend.alignment |
Alineación de la leyenda Puede ser una de las siguientes:
El inicio, el centro y el final están relacionados con el estilo (horizontal o vertical) de la leyenda. Por ejemplo, en una leyenda "derecha", "inicio" y "final" están en la parte inferior y superior, respectivamente. En el caso de una leyenda "superior", "inicio" y "final" estarían a la izquierda y a la derecha del área, respectivamente. El valor predeterminado depende de la posición de la leyenda. Para las leyendas “inferior”, el valor predeterminado es “center”; para las leyendas “inferior”, el valor predeterminado es “start”. Tipo: string
Predeterminada: automática
|
| legend.maxLines |
Cantidad máxima de líneas en la leyenda. Configúralo en un número mayor que uno para agregar líneas a tu leyenda. Nota: La lógica exacta que se usa para determinar el número real de líneas renderizadas sigue en proceso de cambio. Por el momento, esta opción solo funciona cuando legend.position es “top”. Tipo: Número
Configuración predeterminada: 1
|
| legend.position |
Posición de la leyenda. Puede ser una de las siguientes:
Tipo: string
Configuración predeterminada: "derecha"
|
| legend.textStyle |
Un objeto que especifica el estilo de texto de la leyenda. El objeto tiene este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| lineDashStyle |
El patrón de activación y desactivación para las líneas punteadas. Por ejemplo, Tipo: Array de números
Valor predeterminado: nulo
|
| reverseCategories |
Si se establece como verdadera, se dibujará la serie de derecha a izquierda. La configuración predeterminada es dibujar de izquierda a derecha. Tipo: booleano
Predeterminado: falso
|
| selectionMode |
Cuando Tipo: string
Configuración predeterminada: “single”
|
| series |
Un array de objetos, cada uno de los cuales describe el formato de la serie correspondiente en el gráfico. Si quieres usar valores predeterminados para una serie, especifica un objeto vacío {}. Si no se especifica una serie o un valor, se usará el valor global. Cada objeto admite las siguientes propiedades:
Puedes especificar un array de objetos, cada uno de los cuales se aplica a la serie en el orden dado, o puedes especificar un objeto en el que cada elemento secundario tenga una clave numérica que indique a qué serie se aplica. Por ejemplo, las dos declaraciones siguientes son idénticas y declaran la primera serie como negra y ausente en la leyenda, y la cuarta como roja y ausente de la leyenda:
series: [
{color: 'black', visibleInLegend: false}, {}, {},
{color: 'red', visibleInLegend: false}
]
series: {
0:{color: 'black', visibleInLegend: false},
3:{color: 'red', visibleInLegend: false}
}
Tipo: Arreglo de objetos o con objetos anidados
Predeterminado: {}
|
| tema |
Un tema es un conjunto de valores de opciones predefinidos que trabajan en conjunto para lograr un comportamiento o efecto visual de gráfico específico. Por el momento, solo hay un tema disponible:
Tipo: string
Valor predeterminado: nulo
|
| título |
Es el texto que se mostrará sobre el gráfico. Tipo: string
Configuración predeterminada: Sin título
|
| titlePosition |
Dónde colocar el título del gráfico en comparación con el área del gráfico Valores admitidos:
Tipo: string
Configuración predeterminada: "out"
|
| titleTextStyle |
Un objeto que especifica el estilo de texto del título. El objeto tiene este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| cuadro de información |
Un objeto con miembros para configurar varios elementos de información sobre la herramienta. Para especificar propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación: {textStyle: {color: '#FF0000'}, showColorCode: true}
Tipo: objeto
Valor predeterminado: nulo
|
| tooltip.ignoreBounds |
Si se establece en Nota: Esto solo se aplica a la información sobre herramientas HTML. Si esta opción está habilitada con información sobre la herramienta de SVG, se recortará cualquier desbordamiento fuera de los límites del gráfico. Consulta Cómo personalizar el contenido de la información sobre la herramienta para obtener más detalles. Tipo: booleano
Predeterminado: falso
|
| tooltip.isHtml |
Si la estableces como verdadera, usa información sobre la herramienta renderizada por HTML (en lugar de SVG). Consulta Cómo personalizar el contenido de la información sobre la herramienta para obtener más detalles. Nota: La personalización del contenido HTML de la información sobre la herramienta mediante el rol de datos de la columna de información no es compatible con la visualización del diagrama de burbujas. Tipo: booleano
Predeterminado: falso
|
| tooltip.showColorCode |
Si esta preferencia se establece como "true", muestra cuadrados de color junto a la información de la serie en el cuadro de información. El valor predeterminado es verdadero cuando Tipo: booleano
Predeterminada: automática
|
| tooltip.textStyle |
Un objeto que especifica el estilo de texto de la información sobre la herramienta. El objeto tiene este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| tooltip.trigger |
La interacción del usuario que hace que se muestre el cuadro de información:
Tipo: string
Predeterminado: "foco"
|
| vAxes |
Especifica las propiedades de los ejes verticales individuales en caso de que el gráfico tenga varios ejes verticales.
Cada objeto secundario es un objeto
Para especificar un gráfico con varios ejes verticales, primero define un nuevo eje con
{
series: {
2: {
targetAxisIndex:1
}
},
vAxes: {
1: {
title:'Losses',
textStyle: {color: 'red'}
}
}
}
Esta propiedad puede ser un objeto o un array: el objeto es una colección de objetos, cada uno con una etiqueta numérica que especifica el eje que define. Este es el formato que se muestra arriba. El array es un array de objetos, uno por eje. Por ejemplo, la siguiente notación de estilo de array es idéntica al objeto
vAxes: [
{}, // Nothing specified for axis 0
{
title:'Losses',
textStyle: {color: 'red'} // Axis 1
}
]
Tipo: Arreglo de objetos o de objetos con objetos secundarios
Valor predeterminado: nulo
|
| vAxis |
Un objeto con miembros para configurar varios elementos del eje vertical. Para especificar las propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación: {title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Tipo: objeto
Valor predeterminado: nulo
|
| vAxis.baseline |
La propiedad Tipo: Número
Predeterminada: automática
|
| vAxis.baselineColor |
Especifica el color de la línea de base para el eje vertical. Puede ser cualquier cadena HTML de color, por ejemplo: Tipo: Número
Predeterminado: “negro”
|
| vAxis.direction |
La dirección en la que crecen los valores a lo largo del eje vertical. De forma predeterminada, los valores bajos
se muestran en la parte inferior del gráfico. Especifica Tipo: 1 o -1
Configuración predeterminada: 1
|
| vAxis.format |
Una cadena de formato para etiquetas de ejes numéricos. Este es un subconjunto del
conjunto de patrones de ICU
.
Por ejemplo,
El formato real que se aplica a la etiqueta se deriva de la configuración regional con la que se cargó la API. Para obtener más detalles, consulta cómo cargar gráficos con una configuración regional específica .
En el cálculo de los valores de marcas y las líneas de cuadrícula, se considerarán varias combinaciones alternativas de todas las opciones de líneas de cuadrícula relevantes, y las alternativas se rechazarán si se duplican o se superponen las etiquetas de marca con formato.
Por lo tanto, puedes especificar Tipo: string
Predeterminada: automática
|
| vAxis.gridlines |
Un objeto con miembros para configurar las líneas de cuadrícula en el eje vertical. Ten en cuenta que las líneas de cuadrícula del eje vertical se dibujan de forma horizontal. Para especificar las propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación: {color: '#333', minSpacing: 20}
Tipo: objeto
Valor predeterminado: nulo
|
| vAxis.gridlines.color |
El color de las líneas de cuadrícula verticales dentro del área del gráfico Especifica una cadena de color HTML válida. Tipo: string
Predeterminado: “#CCC”
|
| vAxis.gridlines.count |
Es la cantidad aproximada de líneas de cuadrícula horizontales dentro del área del gráfico.
Si especificas un número positivo para Tipo: Número
Valor predeterminado: -1
|
| vAxis.minorGridlines |
Un objeto con miembros para configurar las líneas de cuadrícula secundarias en el eje vertical, similar a la opción vAxis.gridlines. Tipo: objeto
Valor predeterminado: nulo
|
| vAxis.minorGridlines.color |
El color de las líneas de cuadrícula verticales secundarias dentro del área del gráfico. Especifica una cadena de color HTML válida. Tipo: string
Predeterminado: Una combinación de los colores de la línea de cuadrícula y del fondo
|
| vAxis.minorGridlines.count |
La opción minorGridlines.count está obsoleta en su mayoría, excepto para inhabilitar las líneas de cuadrícula secundarias si se establece el recuento en 0. La cantidad de líneas de cuadrícula menores depende del intervalo entre las líneas de cuadrícula principales (consulta vAxis.gridlines.interval) y el espacio mínimo requerido (consulta vAxis.minorGridlines.minSpacing). Tipo: Número
Configuración predeterminada: 1
|
| vAxis.logScale |
Si es verdadero, el eje vertical es una escala logarítmica. Nota: Todos los valores deben ser positivos. Tipo: booleano
Predeterminado: falso
|
| vAxis.scaleType |
La propiedad
Tipo: string
Valor predeterminado: nulo
|
| vAxis.textPosition |
Posición del texto del eje vertical, en relación con el área del gráfico. Valores admitidos: “out”, “in”, “none”. Tipo: string
Configuración predeterminada: "out"
|
| vAxis.textStyle |
Un objeto que especifica el estilo de texto del eje vertical. El objeto tiene este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| vAxis.ticks |
Reemplaza las marcas del eje Y generadas automáticamente por el array especificado. Cada elemento del array debe ser un valor de marca válido (como un número, fecha, fecha y hora o timeofday) o un objeto. Si es un objeto, debe tener una propiedad
ViewWindow se expandirá automáticamente para incluir las marcas mínimas y máximas, a menos que especifiques Ejemplos:
Tipo: Arreglo de elementos
Predeterminada: automática
|
| vAxis.title |
La propiedad Tipo: string
Configuración predeterminada: Sin título
|
| vAxis.titleTextStyle |
Un objeto que especifica el estilo de texto del título del eje vertical. El objeto tiene este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| vAxis.maxValue |
Mueve el valor máximo del eje vertical al valor especificado; este aparecerá hacia arriba en la mayoría de los gráficos. Se ignora si se establece en un valor inferior al valor Y máximo de los datos.
Tipo: Número
Predeterminada: automática
|
| vAxis.minValue |
Mueve el valor mínimo del eje vertical al valor especificado; este aparecerá hacia abajo en la mayoría de los gráficos. Se ignora si se establece en un valor mayor que el valor Y mínimo de los datos.
Tipo: Número
Valor predeterminado: nulo
|
| vAxis.viewWindowMode |
Especifica cómo escalar el eje vertical para renderizar los valores dentro del área del gráfico. Se admiten los siguientes valores de cadena:
Tipo: string
Predeterminado: Equivalente a "pretty", pero
vaxis.viewWindow.min y vaxis.viewWindow.max tienen prioridad si se usan.
|
| vAxis.viewWindow |
Especifica el rango de recorte del eje vertical. Tipo: objeto
Valor predeterminado: nulo
|
| vAxis.viewWindow.max |
El valor máximo de datos verticales que se renderizará. Se ignora cuando Tipo: Número
Predeterminada: automática
|
| vAxis.viewWindow.min |
El valor de datos vertical mínimo que se renderizará. Se ignora cuando Tipo: Número
Predeterminada: automática
|
| width |
Es el ancho del gráfico (en píxeles). Tipo: Número
Predeterminado: Ancho del elemento contenedor
|
Métodos
| Método | |
|---|---|
draw(data, options) |
Dibuja el gráfico. El gráfico acepta más llamadas de método solo después de que se activa el evento Tipo de datos que se muestra: ninguno
|
getAction(actionID) |
Muestra el objeto de acción de información sobre la herramienta con el Tipo de datos que se muestra: objeto
|
getBoundingBox(id) |
Muestra un objeto que contiene las partes izquierda, superior, ancho y altura del elemento
Los valores están relacionados con el contenedor del gráfico. Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: objeto
|
getChartAreaBoundingBox() |
Muestra un objeto que contiene la parte izquierda, superior, ancho y altura del contenido del gráfico (es decir, sin incluir las etiquetas ni la leyenda):
Los valores están relacionados con el contenedor del gráfico. Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: objeto
|
getChartLayoutInterface() |
Muestra un objeto que contiene información sobre la ubicación del gráfico y sus elementos en la pantalla. Se puede llamar a los siguientes métodos en el objeto que se muestra:
Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: objeto
|
getHAxisValue(xPosition, optional_axis_index) |
Muestra el valor de datos horizontales en Ejemplo: Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: número
|
getImageURI() |
Muestra el gráfico serializado como un URI de imagen. Llámalo después de que se dibuje el gráfico. Consulta Cómo imprimir gráficos en PNG. Tipo de datos que se muestra: string
|
getSelection() |
Muestra un array de las entidades del gráfico seleccionadas.
Las entidades seleccionables son pasos, entradas de la leyenda y categorías.
Un paso corresponde a una celda en la tabla de datos, una leyenda a una columna (el índice de fila es nulo) y una categoría a una fila (el índice de columna es nulo).
Para este gráfico, solo se puede seleccionar una entidad en un momento determinado.
Tipo de datos que se muestra: Es el array de elementos de selección.
|
getVAxisValue(yPosition, optional_axis_index) |
Muestra el valor de datos verticales en Ejemplo: Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: número
|
getXLocation(dataValue, optional_axis_index) |
Muestra la coordenada X del píxel de Ejemplo: Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: número
|
getYLocation(dataValue, optional_axis_index) |
Muestra la coordenada Y del píxel de Ejemplo: Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: número
|
removeAction(actionID) |
Quita del gráfico la acción de información sobre la herramienta con el Tipo de datos que se muestra:
none |
setAction(action) |
Establece una acción de información sobre la herramienta que se ejecutará cuando el usuario haga clic en el texto de acción.
El método
Todas las acciones de información sobre la herramienta se deben configurar antes de llamar al método Tipo de datos que se muestra:
none |
setSelection() |
Selecciona las entidades del gráfico especificadas. Cancela cualquier selección anterior.
Las entidades seleccionables son pasos, entradas de la leyenda y categorías.
Un paso corresponde a una celda en la tabla de datos, una leyenda a una columna (el índice de fila es nulo) y una categoría a una fila (el índice de columna es nulo).
Para este gráfico, solo se puede seleccionar una entidad a la vez.
Tipo de datos que se muestra: ninguno
|
clearChart() |
Borra el gráfico y libera todos sus recursos asignados. Tipo de datos que se muestra: ninguno
|
Eventos
Para obtener más información sobre cómo usar estos eventos, consulta Interactividad básica, Cómo controlar eventos y Cómo activar eventos.
| Nombre | |
|---|---|
animationfinish |
Se activa cuando se completa la animación de transición. Propiedades: ninguna
|
click |
Se activa cuando el usuario hace clic en el gráfico. Se puede usar para identificar cuándo se hace clic en el título, los elementos de datos, las entradas de leyenda, los ejes, las líneas de cuadrícula o las etiquetas. Propiedades: targetID
|
error |
Se activa cuando se produce un error cuando se intenta renderizar el gráfico. Propiedades: ID, mensaje
|
legendpagination |
Se activa cuando el usuario hace clic en las flechas de paginación de la leyenda. Devuelve el índice de páginas basado en cero de la leyenda actual y la cantidad total de páginas. Propiedades: currentPageIndex, totalPages
|
onmouseover |
Se activa cuando el usuario desplaza el mouse sobre una entidad visual. Devuelve los índices de fila y columna del elemento de tabla de datos correspondiente. Propiedades:fila, columna
|
onmouseout |
Se activa cuando el usuario aleja el mouse de una entidad visual. Devuelve los índices de filas y columnas del elemento de tabla de datos correspondiente. Propiedades: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 Propiedades: ninguna
|
select |
Se activa cuando el usuario hace clic en una entidad visual. Para saber qué se seleccionó, llama a Propiedades: ninguna
|
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.