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
El gráfico genérico de imagen es un wrapper genérico para todos los gráficos producidos por la API de Google Chart. Lee la documentación de la API de Chart antes de intentar usar esta visualización. Ten en cuenta que puedes enviar hasta 16,000 datos de esta visualización, a diferencia del límite de 2,000 en llamadas directas a la API de Chart.
Todos los datos se pasan a los gráficos mediante una DataTable o DataView. Además, algunas etiquetas se pasan como columnas en la tabla de datos.
Todos los demás parámetros de URL de la API de gráficos (excepto chd
) se pasan como opciones.
Por: Google
Ejemplos
Estos son ejemplos de varios tipos de gráficos.
Gráfico de líneas
<html> <head> <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> <script type='text/javascript'> google.charts.load("current", {packages:["imagechart"]}); </script> <script type='text/javascript'> google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string'); dataTable.addColumn('number'); dataTable.addColumn('string'); // Row data is [chl, data point, point label] dataTable.addRows([ ['January',40,undefined], ['February',60,'Initial recall'], ['March',60,'Product withdrawn'], ['April',45,undefined], ['May',47,'Relaunch'], ['June',75,undefined], ['July',70,undefined], ['August',72,undefined] ]); var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]}; var chart = new google.visualization.ImageChart(document.getElementById('line_div')); chart.draw(dataTable, options); } </script> </head> <body> <div id='line_div'></div> </body> </html>
Gráfico de barras verticales
Ten en cuenta que, en los gráficos de barras unidos, no necesitas especificar chxt='x' como lo harías si llamaras al gráfico tú mismo. Si no especificas un eje, el gráfico genérico intenta configurar el gráfico de forma predeterminada.
<html> <head> <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> <script type='text/javascript'> google.charts.load("current", {packages:["imagechart"]}); </script> <script type='text/javascript'> google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('number'); dataTable.addColumn('number'); dataTable.addRows([ [10,50], [50,60], [60,100], [80,40], [40,20] ]); var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'], chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'}; var chart = new google.visualization.ImageChart(document.getElementById('bar_div')); chart.draw(dataTable, options); } </script> </head> <body> <div id='bar_div'></div> </body> </html>
Gráfico circular
<html> <head> <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> <script type='text/javascript'> google.charts.load("current", {packages:["imagechart"]}); </script> <script type='text/javascript'> google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string'); dataTable.addColumn('number'); dataTable.addRows([ ['January',12], ['February',8], ['March',3] ]); var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200', colors:['#3399CC','#00FF00','#0000FF']}; var chart = new google.visualization.ImageChart(document.getElementById('pie_div')); chart.draw(dataTable, options); } </script> </head> <body> <div id='pie_div'></div> </body> </html>
Gráfico radial
<html> <head> <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> <script type='text/javascript'> google.charts.load("current", {packages:["imagechart"]}); </script> <script type='text/javascript'> google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('number'); dataTable.addColumn('number'); dataTable.addRows([ [100,10], [80,20], [60,30], [30,40], [25,50], [20,60], [10,70] ]); var chart = new google.visualization.ImageChart(document.getElementById('radar_div')); var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',}; chart.draw(dataTable, options); } </script> </head> <body> <div id='radar_div'></div> </body> </html>
Gráfico del mapa
<html> <head> <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> <script type='text/javascript'> google.charts.load("current", {packages:["imagechart"]}); </script> <script type='text/javascript'> google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string'); dataTable.addColumn('number'); dataTable.addRows([ ['DZ',0], ['EG',50], ['MG',50], ['GM',35], ['KE',100], ['ZA',100] ]); var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'}; var chart = new google.visualization.ImageChart(document.getElementById('map_div')); chart.draw(dataTable, options); } </script> </head> <body> <div id='map_div'></div> </body> </html>
Cargando
El nombre del paquete google.charts.load
es 'imagechart'
google.charts.load('current', {'packages': ['imagechart']});
El nombre de clase de la visualización es google.visualization.ImageChart
.
var visualization = new google.visualization.ImageChart(container_div);
Formato de los datos
Existen dos formatos de datos generalizados: uno para los gráficos de mapas y otro para los demás gráficos. Ten en cuenta que el único formato numérico admitido para datos es el tipo de número de JavaScript.
Nota No debes codificar en formato URL los valores de string que se pasen como datos u opciones.
Gráficos de mapas
Un gráfico de mapa toma una tabla de datos con dos columnas obligatorias:
- Primera columna: [string] Código de país o estado/provincia.
- Segunda columna: [número] El valor de ese país o estado.
Consulta la documentación del gráfico de mapas para obtener más información.
Gráficos que no son de mapa
Los gráficos que no son de mapa toman una tabla de datos con dos columnas opcionales (una al principio y otra al final) y una o más columnas de datos en el medio:
- Primera columna: [opcional, string] Cada entrada representa una etiqueta que se usa en el eje X (equivalente al parámetro
chl
ochxl
) para los gráficos que lo admiten. - Columnas siguientes: cualquier cantidad de columnas numéricas, cada una de las cuales representa una serie de datos.
- Últimas columnas: [opcional, string] Cualquier cantidad de columnas de strings después de las columnas de datos, en las que cada entrada representa una etiqueta de datos para los gráficos que la admiten. Si deseas usar esta columna, debes especificar la opción
annotationColumns
.
Los datos se mostrarán de diferentes maneras, según el tipo de gráfico. Consulta la documentación de tu gráfico.
Nota sobre los índices de columna: La visualización del gráfico genérico de imagen quita las columnas de string de la tabla de datos antes de enviarla al servicio de la API de Charts. Por lo tanto, los índices de columna en las opciones, los métodos y los eventos definidos en esta página incluyen las columnas de string en el recuento de índices; sin embargo, los índices de columna en cualquier opción controlada por el servicio de la API de Charts (por ejemplo, la opción chm
) ignoran las columnas de string en el recuento de índices.
Opciones de configuración
Las siguientes opciones están definidas para esta visualización. Defínelo en el objeto de opciones que se pasa al método draw()
de la visualización.
No todas las opciones siguientes son compatibles con todos los tipos de gráfico. Consulta la documentación de tu tipo de gráfico de imagen estática. Puedes pasar cualquier parámetro de URL de la API de gráficos como opción. Por ejemplo, el parámetro de URL chg=50,50
de una visualización de gráfico se especificaría de la siguiente manera: options['chg'] = '50,50'
.
Nota sobre los colores: Las opciones de color, como colors
, color
y backgroundColor
, se especifican en el formato de color de la API de gráficos.
Este formato es similar al formato #RRGGBB, excepto que incluye un cuarto número hexadecimal opcional para indicar la transparencia. No se admiten los colores legibles,
como "rojo", "verde", "azul", etcétera. El formato de color de la API de gráficos no incluye el símbolo # inicial, pero las opciones genéricas de visualización del gráfico de imágenes aceptarán códigos de color con o sin #.
Nombre | Tipo | Predeterminado | Descripción |
---|---|---|---|
anotacionesColumnas | Arreglo<object> | ninguno | Etiquetas de datos para varios tipos de gráficos. Este es un arreglo de objetos que asigna una etiqueta con formato a un dato en el gráfico. Esta opción solo está disponible para gráficos que admiten datos (consulta el tema vinculado para obtener información sobre cuáles) y la tabla de datos debe tener al menos una de las columnas de etiquetas de string. Cada objeto del arreglo tiene las siguientes propiedades:
Ejemplo: Este fragmento de código define una etiqueta de texto negra de 12 píxeles, con texto tomado de la columna 0 y asignado al dato en la columna 2 de la misma fila: |
Color de fondo | string | "#FFFFFF" (blanco) | El color de fondo para el gráfico en el formato de color de la API de gráficos |
color | string | Automático | Especifica un color base para usar en todas las series. Cada serie será una graduación del color especificado. Los colores se especifican en el formato de color de la API de gráficos.
Se ignora si se especifica colors . |
colores | Arreglo<string> | Automático | Úsalo para asignar colores específicos a cada serie de datos. Los colores se especifican en el formato de color de la API de gráficos.
El color i se usa para la columna de datos i y se une al principio si hay más columnas de datos que colores. Si se aceptan variaciones de un solo color para todas las series, usa la opción color en su lugar. |
habilitarEventos | boolean | falso | Causa que los gráficos generen eventos activados por el usuario, como hacer clic o desplazar el mouse. Solo se admite para tipos de gráficos específicos. Consulta la sección Eventos a continuación. |
relleno | boolean | falso | Si es verdadero, completa el área debajo de cada línea. Disponible solo para gráficos de líneas. |
primeraColumnaEscondida | número | ninguno | Un índice de columnas de datos. Las columnas enumeradas, así como las siguientes, no se usarán para dibujar los elementos de la serie principal del gráfico (como las líneas en un gráfico de líneas o las barras en un gráfico de barras), sino que se usarán como datos para marcadores y otras anotaciones. Ten en cuenta que las columnas de string se incluyen en este recuento de índice. |
alto | número | 200 | Altura del gráfico, en píxeles. Si falta o no se encuentra en un rango aceptable, se usa la altura del elemento contenedor. Si también se encuentra fuera del rango aceptable, se utilizará la altura predeterminada. |
etiquetas | string | "none" | [Solo gráfico circular] Qué etiqueta mostrar en cada sector. Elige uno de los siguientes valores:
|
leyenda | string | 'derecha' | Dónde mostrar una leyenda del gráfico, en relación con el gráfico Especifica una de las siguientes opciones: "top", "bottom", "left", "right", "none". Se ignora en los gráficos que no incluyen leyendas (como los gráficos de mapas). |
máx. | número | Valor máximo de datos | El valor máximo que se muestra en la escala. Se ignora para los gráficos circulares. El valor predeterminado es el valor de datos máximo, excepto para los gráficos de barras, en los que el valor predeterminado es el valor de datos máximo. Esto se ignora para los gráficos de barras cuando la tabla tiene más de una columna de datos. |
min | número | Valor de datos mínimo | El valor mínimo que se muestra en la escala. Se ignora para los gráficos circulares. El valor predeterminado es el valor mínimo de datos, excepto para los gráficos de barras, en los que el valor predeterminado es cero. Esto se ignora para los gráficos de barras cuando la tabla tiene más de una columna de datos. |
showCategoryLabels. | boolean | true | Indica si las etiquetas deben aparecer en el eje de categoría (es decir, en la fila). Disponible solo para gráficos de líneas y barras. |
showValueLabels | boolean | true | Verdadero muestra una etiqueta en el eje de valor. Disponible solo para gráficos de líneas y barras. |
Pantalla individual | número | ninguno | Renderiza solo la columna de datos especificada. Este número es un índice basado en cero en la tabla, en el que cero es la primera columna de datos. El color asignado a la columna única es el mismo que cuando se renderizan todas las columnas. No se puede usar con gráficos circulares ni de mapa. |
title | string | String vacío | El título del gráfico. Si no se especifica, no se mostrará ningún título. El parámetro de gráfico equivalente es chtt . |
Intervalo de etiquetas de valor | número | Automático | El intervalo en el que se muestran las etiquetas del eje de valor. Por ejemplo, si min es 0, max es 100, y valueLabelsInterval es 20, el gráfico mostrará las etiquetas de eje en (0, 20, 40, 60, 80 100). |
ancho | número | 400 | Ancho del gráfico en píxeles. Si falta o no se encuentra en un rango aceptable, se usa el ancho del elemento contenedor. Si también está fuera del rango aceptable, se usará el ancho predeterminado. |
Métodos
Método | Tipo de datos que se muestra | Descripción |
---|---|---|
draw(data, options) |
Ninguno | Dibuja el mapa. |
getImageUrl() |
String | Muestra la URL de la API de Google Chart que se usa para solicitar el gráfico. Ten en cuenta que este puede tener más de 2,000 caracteres. Consulta la API de Google Chart para obtener más detalles. |
Eventos
Si configuras la propiedad enableEvents
como verdadera, la compatibilidad con los gráficos generará eventos para los eventos de los usuarios que se indican en la siguiente tabla. Todos estos eventos muestran un objeto event
con las siguientes propiedades:
type
: Es una string que representa el tipo de evento.region
: Es un ID de la región afectada. Agrega el parámetrochof=json
al tipo de gráfico sin procesar para ver una lista de nombres disponibles. Consultachof=json
para obtener más información.
Nombre | Descripción | valor de tipo |
---|---|---|
error |
Se activa cuando se produce un error cuando se intenta procesar el gráfico. | id, mensaje |
onmouseover |
Se activa cuando el usuario desplaza el mouse sobre un elemento del gráfico. | "mouseover" |
onmouseout |
Se activa cuando el usuario aleja un elemento del gráfico. | "mouseout" |
onclick |
Se activa cuando un usuario hace clic en un elemento del gráfico. | "clic" |
¿Qué gráficos admiten eventos?
Cualquier gráfico que admita el parámetro chof=json
admite eventos de lanzamiento (es decir, todos los gráficos, excepto los gráficos especiales, por ejemplo los códigos QR).
Ejemplo de control de eventos
Este es un ejemplo que muestra una barra que registra los clics del mouse.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Image Events Sample </title> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {packages: ['imagechart']}); </script> <script type="text/javascript"> function drawVisualization() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('number'); dataTable.addColumn('number'); dataTable.addRows([ [10,50], [50,60], [60,100], [80,40], [40,20] ]); var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'], chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true}; var chart = new google.visualization.ImageChart(document.getElementById('visualization')); chart.draw(dataTable, options); // Assign event handler google.visualization.events.addListener(chart, 'onclick', mouseEventHandler); } google.charts.setOnLoadCallback(drawVisualization); // Define an event handler function mouseEventHandler(event) { document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>"; } </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="visualization" style="width: 300px; height: 300px;"></div> <div id="debugger"></div> </body> </html>
Política de Datos
Los datos se envían al servicio API de Google Chart.
Localización
Esta visualización admite cualquier localización compatible con el servicio de Google Chart.