Importante: La sección de gráficos de imágenes de las herramientas de Google Chart dejó de estar disponible oficialmente a partir del 20 de abril de 2012. Continuará funcionando de acuerdo con nuestra política de baja.
Descripción general
Uno o varios minigráficos que se renderizan con imágenes mediante la API de Google Charts Las imágenes se encuentran en una tabla HTML.
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:["imagesparkline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Revenue', 'Licenses'], [435, 132], [438, 131], [512, 137], [460, 142], [491, 140], [487, 139], [552, 147], [511, 146], [505, 151], [509, 149] ]); var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div')); chart.draw(data, {width: 120, height: 40, showAxisLines: false, showValueLabels: false, labelPosition: 'left'}); } </script> </head> <body> <div id="chart_div" style="width: 120px; height: 40px;"></div> </body> </html>
Cargando
El nombre del paquete google.charts.load
es "imagesparkline"
.
google.charts.load("current", {packages: ["imagesparkline"]});
El nombre de clase de la visualización es google.visualization.ImageSparkLine
.
var visualization = new google.visualization.ImageSparkLine(container);
Formato de los datos
Cualquier cantidad de columnas Todas las columnas deben ser números. Cada columna se muestra como un minigráfico.
Opciones de configuración
Nombre | Tipo | Predeterminado | Descripción |
---|---|---|---|
color | string | Especifica un color para usar en todos los gráficos.
Una string en el formato #rrggbb. Por ejemplo: “#00cc00”.
Se usa solo si no se especifica la opción colors . |
|
colores | Arreglo de strings | Colores predeterminados | Los colores que se usarán para las columnas de datos. Una matriz de strings en la que cada elemento es una string con el formato #rrggbb. Por ejemplo: “#00cc00”. El color i se utiliza para la columna de datos i. Si el número de colores es menor que el número de columnas, la selección de color se ajustará. |
relleno | boolean | falso | Si es verdadero, el área que aparece debajo de la línea se rellenará con color. |
alto | número | Altura del contenedor | Altura de las imágenes en píxeles. |
labelPosition | string | ninguno | La posición de las etiquetas. Los valores admitidos son “none”, “left” y “right”. |
máx. | Arreglo de números | El valor máximo de datos de cada minigráfico | El valor más alto para el rango de valores de datos de cada minigráfico. El índice del arreglo debe coincidir con el índice de la columna en la tabla de datos. Si todos los valores son nulos, este será el valor máximo en la serie. |
min | Arreglo de números | El valor de datos mínimo de cada minigráfico | El valor más bajo para el rango de valores de datos de cada minigráfico. El índice del arreglo debe coincidir con el índice de la columna en la tabla de datos. Si todos los valores son nulos, este será el valor mínimo en la serie. |
mostrarAxisLines | boolean | true | Si es verdadero, se muestran las líneas del eje. Si es falso, no lo son y el valor predeterminado para showValueLabels es falso. |
showValueLabels | boolean | true, excepto cuando showAxisLines es falso. | Si es verdadero, se muestran las etiquetas del eje de valor. |
title | Arreglo de strings | No se muestran títulos | Títulos para cada minigráfico |
ancho | número | Ancho del contenedor | Ancho de los gráficos, en píxeles. |
diseño | string | "v" | Diseño horizontal o vertical: "v" para vertical, "h" para horizontal. |
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 | Muestra los índices de los gráficos seleccionados como un arreglo de objetos. Cada objeto tiene una propiedad de columna que contiene el número de columna de un minigráfico seleccionado. Puede mostrar más de una columna seleccionada. |
setSelection(selection) |
ninguno | Selecciona los minigráficos especificados y anula la selección de cualquier minigráfico que no esté especificado. es un arreglo de objetos, cada uno con una propiedad column numérica, que es el índice del minigráfico seleccionado. Consulta setSelection() para obtener más información. |
Eventos
Nombre | Descripción | Propiedades |
---|---|---|
select | Evento de selección estándar | Ninguno |
Política de Datos
Consulta la política de registro de la API de Charts.