Descripción general
Los gráficos de anotaciones son gráficos interactivos de líneas temporales que admiten anotaciones. Ten en cuenta que el cronograma anotado ahora usa automáticamente el gráfico de anotaciones.
Alerta de confusión: Actualmente, el gráfico de anotaciones de Google es diferente de las anotaciones que otros gráficos de Google (área actual, barra, columna, combinación, línea y dispersión) admiten. En esos gráficos, las anotaciones se especifican en una columna de tabla de datos separada y se muestran como fragmentos de texto cortos sobre los que los usuarios pueden desplazarse para ver el texto completo de la anotación. En cambio, en el gráfico de anotaciones, se muestran 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 los datos
Puedes mostrar una o más líneas en el gráfico. Cada fila representa una posición X en el gráfico, es decir, una hora específica. Cada línea se describe con 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 resolución de tiempo más pequeña 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 a continuación:
- Valor Y: [Obligatorio, número] La primera columna de cada conjunto describe el valor de la línea en el tiempo correspondiente de la primera columna. La etiqueta de la columna se muestra en el gráfico como el título de esa línea.
- Título de anotación: [opcional, string] Si una columna de string sigue la columna de valor y la opción
displayAnnotationses verdadera, esta columna tiene 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 "El día más caluroso de todos". - Texto de anotación: [String opcional] Si existe una segunda columna de strings para esta serie, se usará el valor de la celda como texto descriptivo adicional para este punto. Debes configurar la opción
displayAnnotationscomo verdadera para usar esta columna. Puedes usar etiquetas HTML si configurasallowHtmlentrue. Básicamente, no hay límite de tamaño, pero ten en cuenta que las entradas demasiado largas podrían 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 columna. Por ejemplo, si este fue el día más caluroso en un punto récord, puedes decir algo como "El día más cercano fue 10 grados más fresco".
Opciones de configuración
| Nombre | |
|---|---|
| allowHtml |
Si se establece como verdadera, todo texto de anotación que incluya etiquetas HTML se procesará como HTML. Tipo: booleano
Valor predeterminado: falso
|
| suplemento suplementario |
Un sufijo que se debe agregar a todos los valores en la leyenda y marcar las etiquetas en los ejes verticales. Tipo: string
Predeterminado: ninguno
|
| Ancho de anotaciones |
El ancho (en porcentaje) del área de las anotaciones, del área del gráfico completa. Debe ser un número entre 5 y 80. Tipo: número
Predeterminado: 25
|
| colores |
Los colores que se usarán para las líneas y etiquetas del gráfico. Un arreglo de strings. Cada elemento es una string en un formato de color HTML válido. Por ejemplo, “rojo” o “#00cc00”. Tipo: Arreglo de strings
Predeterminado: Colores predeterminados
|
| Formato de fecha |
Formato que se utiliza para mostrar la información sobre la fecha en la esquina superior derecha. El formato de este campo es el que especifica la clase java SimpleDateFormat. Tipo: string
Predeterminado: "MMMM dd, yyyy" o "HH:mm MMMM dd, yyyy", según el tipo de la primera columna (fecha o fecha, respectivamente).
|
| Anotación de pantalla |
Si se configura como falso, el gráfico ocultará la tabla de anotaciones y las anotaciones y el texto de las anotaciones no serán visibles (la tabla tampoco se mostrará si no hay anotaciones en tus datos, independientemente de esta opción). Cuando esta opción se configura como verdadera, después de cada columna numérica, se pueden agregar dos columnas de string de anotación opcionales, una para el título de la anotación y otra para el texto de la anotación. Tipo: booleano
Predeterminado: verdadero
|
| DisplayAnnotationsFilter |
Si se establece como verdadera, el gráfico mostrará un control para filtrar las anotaciones. Usa esta opción cuando haya muchas anotaciones. Tipo: booleano
Valor predeterminado: falso
|
| Separador de barra de fecha de visualización |
Indica si se muestra un separador de barra pequeña ( | ) entre los valores de serie y la fecha en la leyenda, cuando verdadero significa sí. Tipo: booleano
Predeterminado: verdadero
|
| Valor exacto de la Red de Display |
Indica si se debe mostrar una versión acortada y redondeada de los valores en la parte superior del grafo para ahorrar espacio. El valor falso indica que puede ser así. Por ejemplo, si se establece como falso, el 56123.45 se mostrará como 56.12k. Tipo: booleano
Valor predeterminado: falso
|
| displayLegendDots |
Indica si se deben mostrar puntos junto a los valores en el texto de las leyendas, donde verdadero significa sí. Tipo: booleano
Predeterminado: verdadero
|
| valores de leyenda de la pantalla |
Indica si se deben mostrar los valores destacados en la leyenda, cuando verdadero significa sí. Tipo: booleano
Predeterminado: verdadero
|
| Selector de rango de visualización |
Indica si se debe mostrar el área de selección de rango de zoom (el área en la parte inferior del gráfico), donde "false" significa "no". El contorno en el selector de zoom es una versión de escala de registro de la primera serie del gráfico, ajustada para ajustarse a la altura del selector de zoom. Tipo: booleano
Predeterminado: verdadero
|
| Botones de zoom de la pantalla |
Indica si se deben mostrar los botones de zoom ("1d 5d 1m", etc.), en los que "false" significa "no". Tipo: booleano
Predeterminado: verdadero
|
| relleno |
Un número del 0 al 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, sin relleno. El color de relleno es el mismo que el de la línea que aparece arriba. Tipo: número
Valor predeterminado: 0
|
| leyendadeposición |
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”
|
| máx. |
El valor máximo que se muestra en el eje Y. Si el punto máximo de datos excede este valor, esta configuración se ignorará y el gráfico se ajustará para mostrar la siguiente marca de verificación principal sobre el punto de datos máximo. Esto tendrá prioridad sobre el máximo del eje Y determinado por Esto es similar a Tipo: número
Predeterminado: automático
|
| min |
El valor mínimo para mostrar 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 eje Y mínimo que determina Esto es similar a Tipo: número
Predeterminado: automático
|
| Formatos de número |
Especifica los patrones de formato de número que se usarán para dar formato a los valores en la parte superior del grafo. Los patrones deben tener el formato que especifica la clase java DecimalFormat.
Si se especifica esta opción, se ignora la opción Tipo: string o un mapa de pares number:string
Predeterminado: automático
|
| Columnas a escala |
Especifica qué valores se muestran en las marcas del eje Y en el gráfico. La opción predeterminada es 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 serie. Esta opción toma un arreglo de cero a tres números que especifica el índice (basado en cero) de la serie para usar como valor de escala. La ubicación de estos valores depende de la cantidad de valores que incluyas en tu arreglo:
Cuando se muestra más de una escala, se recomienda configurar la opción Tipo: Arreglo de números
Configuración predeterminada: Automática
|
| Formato a escala |
Formato de número que se usa para las etiquetas del eje. El valor predeterminado de Tipo: string
Valor predeterminado: '#'
|
| Tipo de escala |
Establece los valores máximos y mínimos que se muestran en el eje Y. Las siguientes opciones están disponibles:
Si especificas las opciones mínimas o máximas, tendrán prioridad sobre los valores mínimos y máximos determinados por tu tipo de escala. Tipo: string
Configuración predeterminada: "Fija"
|
| tabla |
Contiene opciones relacionadas con la tabla de anotaciones. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos:
var options: {
table: {
sortAscending: true,
sortColumn: 1
}
};
Type:
Valor predeterminado: null
|
| tabla.sortAscending |
Si se configura en Tipo: booleano
Valor predeterminado: falso
|
| Tabla.sortColumn |
El índice de columna de la tabla de anotaciones para el 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 del 0 al 10 (inclusive) que especifica el grosor de las líneas, donde 0 es el delgado. Tipo: número
Valor predeterminado: 0
|
| Hora de finalización de zoom |
Establece la fecha y la hora de finalización del intervalo de zoom seleccionado. Tipo: Fecha
Predeterminado: ninguno
|
| Hora de inicio del zoom |
Establece la fecha y la hora de inicio del intervalo de zoom seleccionado. Tipo: Fecha
Predeterminado: ninguno
|
Métodos
| Método | |
|---|---|
clearChart() |
Borra el gráfico y libera todos los 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 anotación. Tipo de datos que se muestra: Control de un elemento DOM
|
getSelection() |
Implementación estándar de Tipo de datos que se muestra: arreglo de elementos de selección
|
getVisibleChartRange() |
Muestra un objeto con las propiedades
Tipo de resultado: un objeto con las 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 arreglo 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 la serie de datos especificada del gráfico después de que se ocultaron mediante el método Tipo de datos que se muestra: ninguno
|
Eventos
| Nombre | |
|---|---|
rangechange |
Se activa cuando el usuario cambia el control deslizante del rango. Los nuevos extremos de 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, finalización
|
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 Propiedades: ninguna
|
select |
Se activa cuando el usuario hace clic en una entidad visual. Para saber qué elementos se seleccionaron, llama a Propiedades: ninguna
|
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.