Descripción general
Los gráficos de anotaciones son gráficos de líneas de series temporales interactivas que admiten anotaciones. Ten en cuenta que el cronograma anotado ahora usa automáticamente el gráfico de anotaciones.
Alerta de confusión: por el momento, el gráfico de anotaciones de Google es diferente de las anotaciones que admiten otros gráficos de Google (actualmente de área, barra, columna, combinado, línea y dispersión). En esos gráficos, las anotaciones se especifican en una columna separada de tabla de datos y se muestran como fragmentos cortos de texto sobre los que los usuarios pueden colocar el cursor para ver el texto completo de la anotación. Por el contrario, el gráfico de anotaciones muestra las anotaciones completas en el lado derecho, como se muestra a continuación.
Ejemplo
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type='text/javascript'>
google.charts.load('current', {'packages':['annotationchart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Kepler-22b mission');
data.addColumn('string', 'Kepler title');
data.addColumn('string', 'Kepler text');
data.addColumn('number', 'Gliese 163 mission');
data.addColumn('string', 'Gliese title');
data.addColumn('string', 'Gliese text');
data.addRows([
[new Date(2314, 2, 15), 12400, undefined, undefined,
10645, undefined, undefined],
[new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
12374, undefined, undefined],
[new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
15766, 'Gallantors', 'First Encounter'],
[new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
34334, 'Gallantors', 'Statement of shared principles'],
[new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
66467, 'Gallantors', 'Mysteries revealed'],
[new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
79463, 'Gallantors', 'Omniscience achieved']
]);
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
displayAnnotations: true
};
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='chart_div' style='width: 900px; height: 600px;'></div>
</body>
</html>
Cargando
El nombre del paquete google.charts.load es "annotationchart".
google.charts.load("current", {packages: ['annotationchart']});
El nombre de clase de la visualización es google.visualization.AnnotationChart.
var visualization = new google.visualization.AnnotationChart(container);
Formato de datos
Puedes mostrar una o más líneas en tu gráfico. Cada fila representa una posición X en el gráfico, es decir, un tiempo específico. Cada línea se describe mediante un conjunto de una a tres columnas.
- La primera columna es de tipo
dateodatetimey especifica el valor X del punto en el gráfico. Si esta columna es del tipodate(y nodatetime), la menor resolución de tiempo en el eje X será de un día. - Luego, cada línea de datos se describe con un conjunto de una a tres columnas adicionales, como se describe aquí:
- Valor Y: [obligatorio, número] La primera columna de cada conjunto describe el valor de la línea en el momento correspondiente de la primera columna. La etiqueta de columna se muestra en el gráfico como el título de esa línea.
- Título de la anotación - [Opcional, String] Si una columna de cadena sigue a la columna de valor y la opción
displayAnnotationses verdadera, esta columna contiene un título corto que describe este punto. Por ejemplo, si esta línea representa la temperatura en Brasil y este punto es un número muy alto, el título podría ser "Día más caluroso de registro". - Texto de anotación: [Cadena opcional] Si existe una segunda columna de cadena para esta serie, el valor de la celda se usará como texto descriptivo adicional para este punto. Debes configurar la opción
displayAnnotationscomo verdadera para usar esta columna. Puedes usar etiquetas HTML si configurasallowHtmlcomotrue. Básicamente, no hay límite de tamaño, pero ten en cuenta que las entradas demasiado largas pueden desbordar la sección de visualización. No es necesario que tengas esta columna incluso si tienes una columna de título de anotación para este punto. El gráfico no usa la etiqueta de la columna. Por ejemplo, si este fuese el día más caluroso en un punto récord, podrías decir algo como “El siguiente día más cercano fue 10 grados más frío”.
Opciones de configuración
| Nombre | |
|---|---|
| allowHtml |
Si se establece como verdadera, cualquier texto de anotación que incluya etiquetas HTML se renderizará como HTML. Tipo: booleano
Predeterminado: falso
|
| allValuesSuffix |
Un sufijo que se agregará a todos los valores de la leyenda y las etiquetas de marca en los ejes verticales. Tipo: string
Configuración predeterminada: ninguna
|
| annotationsWidth |
El ancho (en porcentaje) del área de las anotaciones, de toda el área del gráfico. Debe ser un número entre 5 y 80. Tipo: Número
Valor predeterminado: 25
|
| colores |
Los colores que se usarán para las líneas y etiquetas del gráfico. Un array de cadenas. Cada elemento es una cadena en un formato de color HTML válido. Por ejemplo, "rojo" o "#00cc00". Tipo: Arreglo de cadenas
Predeterminado: Colores predeterminados
|
| dateFormat |
El formato que se usa para mostrar la información de la fecha en la esquina superior derecha. El formato de este campo es el que especifica la clase java SimpleDateFormat. Tipo: string
Predeterminado:
Puede ser “MMMM dd, yyyy” o “HH:mm MMMM dd, yyyy”, según el tipo de la primera columna (fecha o fecha y hora, respectivamente).
|
| displayAnnotations |
Si la estableces como falsa, el gráfico ocultará la tabla de anotaciones, y las anotaciones y annotationText no serán visibles (la tabla de anotaciones tampoco se mostrará si no hay anotaciones en tus datos, independientemente de esta opción). Cuando esta opción se establece en verdadero, después de cada columna numérica, se pueden agregar dos columnas opcionales de string de anotación: una para el título de la anotación y otra para el texto de la anotación. Tipo: booleano
Predeterminado: verdadero
|
| displayAnnotationsFilter |
Si la estableces como verdadera, el gráfico mostrará un control de filtro para filtrar anotaciones. Usa esta opción cuando haya muchas anotaciones. Tipo: booleano
Predeterminado: falso
|
| displayDateBarSeparator |
Indica si se debe mostrar un pequeño separador de barra ( | ) entre los valores de la serie y la fecha en la leyenda, donde verdadero significa sí. Tipo: booleano
Predeterminado: verdadero
|
| displayExactValues |
Establece si se debe mostrar una versión abreviada y redondeada de los valores en la parte superior del gráfico para ahorrar espacio; "false" indica que sí. Por ejemplo, si se configura como falso, 56123.45 podría mostrarse como 56.12k. Tipo: booleano
Predeterminado: falso
|
| displayLegendDots |
Indica si se deben mostrar puntos junto a los valores en el texto de la leyenda, donde "verdadero" significa que sí. Tipo: booleano
Predeterminado: verdadero
|
| displayLegendValues |
Indica si se deben mostrar los valores destacados en la leyenda, donde verdadero significa que sí. Tipo: booleano
Predeterminado: verdadero
|
| displayRangeSelector |
Indica si se muestra el área de selección del rango de zoom (el área en la parte inferior del gráfico), donde “falso” significa que no. El contorno del selector de zoom es una versión a escala logarítmica de la primera serie del gráfico, ajustada para adaptarse a la altura del selector de zoom. Tipo: booleano
Predeterminado: verdadero
|
| displayZoomButtons |
Establece si se deben mostrar los botones de zoom ("1d 5d 1m" y así sucesivamente), donde "falso" significa "no". Tipo: booleano
Predeterminado: verdadero
|
| relleno |
Es un número de 0 a 100 (inclusive) que especifica el alfa del relleno debajo de cada línea en el gráfico de líneas. 100 significa 100% opaco, y 0 significa que no hay ningún relleno. El color de relleno es del mismo que la línea superior. Tipo: Número
Valor predeterminado: 0
|
| legendPosition |
Indica si se debe colocar la leyenda de color en la misma fila con los botones de zoom y la fecha ("sameRow") o en una fila nueva ("newRow"). Tipo: string
Configuración predeterminada: “sameRow”
|
| max |
El valor máximo que se muestra en el eje Y. Si el dato máximo supera este valor, se ignorará esta configuración y el gráfico se ajustará para mostrar la siguiente marca de verificación principal por encima del dato máximo. Esto tendrá prioridad sobre el máximo del eje Y determinado por Es similar a Tipo: Número
Predeterminada: automática
|
| min |
El valor mínimo que se muestra en el eje Y. Si el dato mínimo es menor que este valor, se ignorará esta configuración y el gráfico se ajustará para mostrar la siguiente marca de verificación principal debajo del dato mínimo. Esto tendrá prioridad sobre el mínimo del eje Y
determinado por Es similar a Tipo: Número
Predeterminada: automática
|
| numberFormats |
Especifica los patrones de formato de número que se usarán para dar formato a los valores de la parte superior del gráfico. Los patrones deben tener el formato que especifica la clase java DecimalFormat.
Si se especifica esta opción, se ignora la opción Tipo: Cadena o un mapa de pares de número:String
Predeterminada: automática
|
| scaleColumns |
Especifica qué valores mostrar en las marcas del eje Y del gráfico. La configuración predeterminada consiste en tener una sola escala en el lado derecho, que se aplica a ambas series, pero puedes tener diferentes lados del grafo escalados a diferentes valores de series. Esta opción toma un array de cero a tres números que especifican el índice (basado en cero) de la serie que se usará como valor de escala. El lugar en el que se muestran estos valores depende de la cantidad de valores que incluyes en el array:
Cuando se muestra más de una escala, es recomendable configurar la opción Tipo: Array de números
Predeterminada: Automática
|
| scaleFormat |
Formato de número que se usa para las etiquetas de marcas de eje. El valor predeterminado Tipo: string
Predeterminada: '#'
|
| scaleType |
Establece los valores máximo y mínimo que se muestran en el eje Y. Están disponibles las siguientes opciones:
Si especificas las opciones mínima o máxima, tendrán prioridad sobre los valores mínimo y máximo determinados por tu tipo de escala. Tipo: string
Predeterminado: “corregido”
|
| table |
Contiene opciones relacionadas con la tabla de anotaciones. Para especificar propiedades de este objeto, puedes usar la notación literal de objeto:
var options: {
table: {
sortAscending: true,
sortColumn: 1
}
};
Tipo: objeto
Valor predeterminado: nulo
|
| table.sortAscending |
Si se configura en Tipo: booleano
Predeterminado: falso
|
| table.sortColumn |
El índice de columna de la tabla de anotaciones para la que se ordenarán las anotaciones. El índice debe ser 0 para la columna de etiquetas de anotación, o 1 para la columna de texto de anotación. Tipo: Número
Valor predeterminado: 0
|
| Grosor |
Un número de 0 a 10 (inclusive) que especifica el grosor de las líneas, donde 0 es el más delgado. Tipo: Número
Valor predeterminado: 0
|
| zoomEndTime |
Establece la fecha y hora de finalización del intervalo de zoom seleccionado. Tipo: Fecha
Configuración predeterminada: ninguna
|
| zoomStartTime |
Establece la fecha y hora de inicio del rango de zoom seleccionado. Tipo: Fecha
Configuración predeterminada: ninguna
|
Métodos
| Método | |
|---|---|
clearChart() |
Borra el gráfico y libera todos sus recursos asignados. Tipo de datos que se muestra: ninguno
|
draw(data, options, state) |
Dibuja el gráfico. Tipo de datos que se muestra: ninguno
|
getContainer() |
Recupera un controlador para el elemento contenedor que contiene el gráfico de anotaciones. Tipo de datos que se muestra: Controlador de un elemento del DOM
|
getSelection() |
Implementación estándar de Tipo de datos que se muestra: Es el array de elementos de selección.
|
getVisibleChartRange() |
Muestra un objeto con propiedades
Tipo de datos que se muestra: Un objeto con propiedades
start y end
|
hideDataColumns(columnIndexes) |
Oculta la serie de datos especificada del gráfico. Acepta un parámetro que puede ser un número o un array de números, en el que 0 se refiere a la primera serie de datos, y así sucesivamente. Tipo de datos que se muestra: ninguno
|
setVisibleChartRange(start, end) |
Establece el rango visible (zoom) en el rango especificado. Acepta dos parámetros de tipo Tipo de datos que se muestra: ninguno
|
showDataColumns(columnIndexes) |
Muestra las series de datos especificadas del gráfico, después de que se ocultaron con el método Tipo de datos que se muestra: ninguno
|
Eventos
| Nombre | |
|---|---|
rangechange |
Se activa cuando el usuario cambia el control deslizante de rango. Los nuevos extremos del rango estarán disponibles como
google.visualization.events.addListener(chart, 'rangechange', rangechange_handler);
function rangechange_handler(e) {
console.log('You changed the range to ', e['start'], ' and ', e['end']);
}
Propiedades: inicio, fin
|
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.