Importante: Aunque los gráficos de Google dinámicos e interactivos se mantienen de forma activa, dejamos de baja oficialmente los gráficos estáticos de Google Image 201 en los últimos días. Se desactivó el 18 de marzo de 2019.
En esta página, se describe cómo crear una variedad de textos destacados, burbujas, marcadores y otros gráficos que se pueden crear usando una URL.
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
- Introducción
- Sintaxis
- Tipos de íconos
- Burbujas
- Pines
- Notas de estilo divertidas
- Notas del pronóstico del tiempo
- Bloques de texto de fuentes con contorno (solo texto)
- Bloques de texto de fuente con contorno (texto + ícono)
- Lista de marcas e íconos disponibles
- Strings de texto
- Sombras
Introducción
Puedes crear una variedad de textos destacados, marcadores o burbujas interesantes que combinen imágenes y texto. Estos elementos se denominan íconos dinámicos.
Sintaxis
URL raíz: https://chart.googleapis.com/chart?
Los íconos dinámicos admiten los siguientes parámetros después del signo "?" en la URL raíz:
| Parámetro | Obligatorio u opcional | Descripción |
|---|---|---|
chst=<icon_string_constant> |
Obligatorio | Describe qué tipo de icono crear.
|
chld=<icon_data> |
Obligatorio | Los datos específicos que se usan para describir el tamaño, la rotación, el texto y otros datos obligatorios del ícono.
|
Tipos de íconos
| Tipo | Ejemplos |
|---|---|
| Burbujas: Elige burbujas de texto pequeñas o grandes, con o sin íconos. |     |
| Marcadores: Los tipos de pin pueden ser simples, destacados o inclinados, y pueden tener un ícono, una sola letra o strings de texto más largas. |       |
| Notas de estilo divertidas con texto y título opcional |  |
| Notas del pronóstico del tiempo con título, ícono de clima y texto |  |
| Bloque de texto con contorno de varias líneas, sin ícono |  |
| Bloque de texto con contorno de una sola línea con ícono |   |
Burbujas
Las burbujas vienen en varias combinaciones de funciones: tamaño grande o pequeño, con o sin ícono, una sola línea o texto de varias líneas. En la siguiente tabla, se describen los tipos de burbujas y la sintaxis para cada uno. La descripción de cada valor del parámetro se describe debajo de la tabla.
Algunas notas adicionales:
- Se cambia el tamaño de todas las burbujas para que se adapten al ancho y alto del texto que ingreses.
- La constante de burbuja admite una variación que termina en
_withshadow. Si usas la variación_withshadow, esta agrega una sombra debajo de la burbuja.
| Texto | Ícono | Sintaxis | Solo sombras | Ejemplo |
|---|---|---|---|---|
| Una sola línea | No. | chst= |
chst= |
 chst=d_bubble_text_small |
| Una sola línea | Yes | chst= |
chst= |
 chst=d_bubble_icon_text_small |
| Una sola línea | Yes |
chst= |
chst= |
 chst=d_bubble_icon_text_big |
| Varias líneas | No. | chst= |
chst= |
 chst=d_bubble_texts_big |
| Varias líneas | Yes |
|
chst= |
 chst=d_bubble_icon_texts_big |
Sintaxis
- <icon_string>
- Es una cadena que especifica uno de los íconos que se describen al final de este documento.
- <frame_style>
- Dirección de la cola. Elige una de las siguientes constantes de dirección de cola:
bb- Marco de globo, cola en la parte inferior izquierda
bbtl: Marco de globo, cola en la parte superior izquierda
bbtr: Marco de globo, cola en la parte superior derecha
bbbr: Marco del globo, cola en la parte inferior derecha
bbT- Marco de globo, sin cola
edge_bl: Marco del borde, cola en el borde inferior y extremo izquierdo
edge_bc: Marco del borde, cola en el borde inferior y centrado
edge_br: Marco del borde, cola en el borde inferior y extremo derecho
edge_tl: Marco del borde, cola en el borde superior, extremo izquierdo
edge_tc: Marco del borde, cola en el borde superior, centrado
edge_tr: Marco del borde, cola en el borde superior y extremo derecho
edge_lt: Marco del borde, cola en el borde izquierdo, extremo superior
edge_lc: Marco del borde, cola en el borde izquierdo, centrado
edge_lb: Marco del borde, cola en el borde izquierdo, extremo inferior
edge_rt: Marco del borde, cola en el borde derecho y extremo superior
edge_rc- Marco del borde, cola en el borde derecho, centrado
edge_rb: Marco del borde, cola en el borde derecho y extremo inferior
- <fill_color>.
- El color de relleno de la burbuja, como un color hexadecimal HTML de seis dígitos.
- <text_color>
- El color del texto, como un color hexadecimal HTML de seis dígitos.
- <text>
- Una sola línea de texto de burbuja para burbujas de una línea. Los espacios deben tener signos más.
- <text_line_1>|...|<text_line_n>
- Una o más líneas de texto para burbujas de texto de varias líneas. Cada línea está separada por una marca |. La primera línea se mostrará más grande y en negrita. Los espacios se deben reemplazar por el signo +.
Solo sombras
En el caso de las burbujas, también puedes dibujar la sombra independiente usando la sintaxis que se muestra en la tabla anterior. Ejemplos:
 chst= |
 chst= |
 chst= |
 chst= |
 chst= |
Pines
Puedes crear una variedad de marcadores con íconos o cadenas de texto cortas. Estos son los tipos de pin disponibles.
| Tipo de pin | Constante de burbuja | Ejemplos |
|---|---|---|
| Fijar con una sola letra o ícono |
|
  |
| Marcador inclinado o destacado con una sola letra o ícono |
|
    |
| Pin escalable, rotable y multilínea | chst=d_map_spin |
 |
Pin sencillo con una sola letra o el ícono 
Este es un pequeño alfiler vertical que puede contener un ícono pequeño o una sola letra.
Sintaxis de letras
chst=d_map_pin_letter[_withshadow] chld=<character>|<fill_color>|<text_color>
Sintaxis de íconos
chst=d_map_pin_icon[_withshadow] chld=<icon_string>|<fill_color>
- <carácter>
- [Solo elementos de fijación de texto] Un solo carácter de texto.
- <icon_string>
- [Solo pins de íconos] Es una cadena que especifica uno de los íconos que se describen al final de este documento.
- <fill_color>.
- El color de relleno de la burbuja, como un color hexadecimal HTML de seis dígitos.
- <text_color>
- [Solo pines de texto] El color del texto, como un color hexadecimal HTML de seis dígitos.
Solo sombras
A fin de dibujar la sombra solo para este tipo de pin, usa esta sintaxis:
chst=d_map_pin_shadow
El parámetro chld no es necesario solo para una sombra.
Ejemplos
 chst=d_map_pin_letter_withshadow |
 chst=d_map_pin_letter |
 chst=d_map_pin_icon |
 chst=d_map_pin_shadow |
Pin inclinado o destacado con una sola letra o ícono 
Es un pequeño alfiler que se puede inclinar hacia la izquierda o la derecha, o que se superpone con una estrella. El contenido del marcador puede ser un solo carácter o un ícono pequeño.
Sintaxis de la letra
chst=d_map_xpin_letter[_withshadow] chld=<pin_style>|<character>|<fill_color>|<text_color>|<star_fill_color>
Sintaxis del ícono
chst=d_map_xpin_icon[_withshadow] chld=<pin_style>|<icon_string>|<fill_color>|<star_fill_color>
- <pin_style>
- El estilo del pin Elige una de las siguientes constantes:
pin
pin_star
pin_sleft
pin_sright
- <icon_string>
- [Pines de íconos] Es una cadena que especifica uno de los íconos que se describen al final de este documento.
- <carácter>
- [Fijar texto] Es un carácter de texto único.
- <fill_color>.
- El color de relleno de la burbuja, como un color hexadecimal HTML de seis dígitos.
- <text_color>
- [Pines de texto] Es el color del texto, como un color hexadecimal HTML de seis dígitos.
- <star_fill_color>
- [Pines de estrella] Es el color de relleno de la estrella, como un color hexadecimal HTML de seis dígitos.
Solo sombras
A fin de dibujar la sombra solo para este tipo de pin, usa esta sintaxis:
chst=d_map_xpin_shadow chld=<pin_style>
Ejemplos
 chst=d_map_xpin_letter |
 chst=d_map_xpin_letter |
 chst=d_map_xpin_icon |
 chst=d_map_xpin_shadow |
Pin de texto con escalamiento y rotación 
Este es un pin que se puede ajustar de forma manual para incluir cadenas de texto más largas. También puedes rotar el pin en una cantidad personalizada y controlar el tamaño y color de la fuente.
Sintaxis
chst=d_map_spin chld=<scale_factor>|<rotation_deg>|<fill_color>|<font_size>|<font_style>|<text_line_1>|...|<text_line_n>
- <scale_factor>
- Un factor de escala para especificar el tamaño del pin. Este es un número de punto flotante positivo, en el que 0.5 es el tamaño de los marcadores sin escala. 0.25 sería la mitad de ese tamaño, 1 sería el doble de ese tamaño, y así sucesivamente.
- <rotation_deg>
- Es la rotación del pin, en grados. Se permiten valores positivos y negativos. Especifica 0 para un pin vertical.
- <fill_color>.
- El color de relleno de la burbuja, como un color hexadecimal HTML de seis dígitos.
- <font_size>
- Es el tamaño de la fuente del texto en píxeles.
- <font_style>
- Se puede usar "_" (guion bajo) para texto normal o "b" para texto en negrita.
- <text_line_1>...<text_line_n>
- Una o más líneas de texto, delimitadas por caracteres |
Ejemplos
 chst=d_map_spin |
 chst=d_map_spin |
 chst=d_map_spin |
Notas de estilo divertidas
Puedes crear una variedad de notas de texto en plantillas novedosas, como una nota adhesiva o una burbuja de pensamiento. De manera opcional, puedes incluir una línea de título en la nota.
Estas notas tienen un tamaño fijo; no se expandirán ni se reducirán para adaptarse al tamaño del texto.
Sintaxis
chst=d_fnote_title OR chst=d_fnote chld=<note_type>|<note_size>|<text_color>|<text_alignment>|<text_line_1>|...|<text_line_n>
- pecho
- Especifica
d_fnote_titlepara una nota con título od_fnotepara una nota sin título. En una nota con título, la primera línea de texto se formateará como un título (más grande y en negrita). - <note_type>;
- Es una cadena que describe la forma de la nota. Elige una de las strings de tipo de nota de la tabla siguiente.
- <note_size>
- 1 (uno) para una nota grande o 2 para una nota pequeña. Los tamaños de las plantillas son fijos; no se aumentan ni se contraen para ajustarse al texto. Experimenta con ambos tamaños para ver cuál retiene mejor tu texto.
- <text_color>
- El color del texto, como un color hexadecimal de seis dígitos. No se aceptan valores alfa.
- <text_alignment>.
- La alineación para todo el texto, incluido el encabezado Elige uno de los siguientes valores:
- l - ('L') Alineado a la izquierda
- h: Alineada al centro
- r: Alineado a la derecha
- <text_line_1>| ...|<text_line_n>
- Es el texto de la nota. Usa el carácter | para indicar una línea nueva. Cuando es
chst=d_fnote_title, la primera línea de texto tiene el formato de un título.
Plantillas de tipos de notas
Las siguientes plantillas son compatibles con las plantillas de notas. La string note_type de cada uno se muestra debajo de la plantilla.
Nota: Las strings de texto distinguen mayúsculas de minúsculas.
 arrow_d |
 balloon |
 pinned_c |
 sticky_y |
 taped_y |
 thought |
Ejemplos
| Descripción | Ejemplo |
|---|---|
Nota con título: chst=d_fnote_title. La primera línea de texto se usa como título. El tamaño es de la nota grande (1). |
 chst=d_fnote_title |
Nota sin título: chst=d_fnote.El texto está centrado. |
 chst=d_fnote |
Una plantilla útil para un chiste antiguo. |
|
Notas del pronóstico del tiempo
Puedes crear una nota con un ícono de indicador de clima. Diseño similar a las notas de estilo divertidas, pero el color del texto siempre es negro, el texto siempre está alineado a la izquierda y solo puedes tener de una a tres líneas de texto.
Estas notas tienen un tamaño fijo; no se expandirán ni se reducirán para adaptarse al tamaño del texto.
Sintaxis
chst=d_weather chld=<note_type>|<weather_icon>|<title>|<line_2>|<line_3>
- pecho
d_weatherindica una nota del clima.- <note_type>;
- La plantilla que se usará para esta nota. Usa una de las strings de notas enumeradas en la lista de notas de estilo divertido anterior.
- <weather_icon>
- Una de las strings de íconos del clima en la tabla de abajo. Una nota puede usar un solo ícono de clima.
- <title>|<line_2>|<line_3>
- El título y hasta dos líneas de texto más (estas líneas de texto adicionales son opcionales) El título es más grande y está en negrita.
Íconos de clima
A continuación, se incluye una lista de íconos de clima admitidos, que muestra la cadena weather_icon de cada uno.
Nota: Las strings de texto distinguen mayúsculas de minúsculas.
 clear-night-moon |
 cloudy-heavy |
 cloudy-sunny |
 cloudy |
 rain |
 rainy-sunny |
 snow |
 snowflake |
 snowy-sunny |
 sunny-cloudy |
 sunny |
 thermometer-cold |
 thermometer-hot |
 thunder |
 windy |
Ejemplos
| Descripción | Ejemplo |
|---|---|
Una nota meteorológica con un título y dos líneas en una plantilla de estilo taped_y. |
|
| Un deseo para el invierno |
|
Bloques de texto de fuentes con contorno (solo texto)
Puedes crear un bloque de texto con contorno con un fondo blanco. Si quieres un ícono de texto +, considera usar la variedad de una sola línea, que admite un ícono.
Sintaxis
chst=d_text_outline chld=<text_fill_color>|<font_size>|<text_alignment>|<outline_color>|<font_weight>|<text_line_1>|...|<text_line_n>
- <text_fill_color>
- Es el color de relleno del texto. Este es un color hexadecimal de seis dígitos. No se aceptan valores alfa.
- <font_size>
- Es un número que especifica el tamaño de la fuente en píxeles.
- <text_alignment>.
- La alineación para todo el texto, incluido el encabezado Elige uno de los siguientes valores:
- l - ('L')Alineado a la izquierda
- h: Alineada al centro
- r: Alineado a la derecha
- <outline_color>
- El color del contorno del texto. Este es un color hexadecimal de seis dígitos. No se aceptan valores alfa.
- <font_weight>
- Texto normal o en negrita Guion bajo “_” para texto normal y “b” para texto en negrita.
- <text_line_1>| ...|<text_line_n>
- Es el texto de la nota. Usa el carácter | para indicar una línea nueva. Cuando es
chst=d_fnote_title, la primera línea de texto tiene el formato de un título.
Ejemplos
 chst=d_text_outline |
 chst=d_text_outline |
Bloques de texto de fuente con contorno (texto + ícono) 
Puedes crear una sola línea de texto delineado más un ícono en la parte superior, izquierda, inferior o derecha del bloque. Si no necesitas un ícono, usa el bloque de texto de fuente con contorno.
Sintaxis
chst=<icon_position_string> chld=<text>|<font_size>|<font_fill_color>|<icon_name>|<icon_size>|<icon_fill_color>|<icon_and_text_border_color>
- <icon_position_string>
- Especifica dónde aparece el ícono en el cuadro de texto. Elige uno de los siguientes valores:
d_simple_text_icon_below: Coloca el ícono en la parte inferior del cuadro:
.d_simple_text_icon_above: Coloca el ícono en la parte superior del cuadro:
.d_simple_text_icon_left: Coloca el ícono a la izquierda del cuadro:
.d_simple_text_icon_right: Coloca el ícono a la derecha del cuadro:
.
- <text>
- Es el texto que se mostrará. Solo una línea; usa el signo + para los espacios.
- <font_size>
- Es un número que especifica el tamaño de la fuente en píxeles.
- <font_fill_color>
- Es el color de relleno del texto, como una cadena de seis dígitos. No se admiten los valores alfa.
- <icon_name>.
- Uno de los nombres de los íconos que aparecen en la parte inferior de este documento
- <icon_size>
- La altura del ícono en píxeles. Se admiten los siguientes valores: 12, 16, 24.
- <icon_fill_coloricon_fill_color>;
- El color del ícono, como una cadena de seis dígitos. No se admiten los valores alfa.
- <icon_and_text_border_color>
- El color del borde que rodea el ícono y el texto como una cadena de seis dígitos. No se admiten los valores alfa.
Lista de marcas e íconos disponibles
Las siguientes imágenes se pueden usar en íconos dinámicos con el parámetro adecuado.
Nota: Las strings de texto distinguen mayúsculas de minúsculas.
Nota: Los íconos solo están disponibles en los siguientes tamaños: 12, 16, 24.
Íconos básicos
Íconos de Glyphish.com
Estos íconos son de Joseph Wain / glyphish.com. Este trabajo cuenta con la licencia Creative Commons Attribution 3.0 Estados Unidos.
Marcas
A continuación, se muestran las marcas de algunos países y territorios.
Strings de texto
Todo el texto visible que se envíe en la solicitud debe estar codificado en UTF-8 y, luego, en URL.
Esto solo afecta a los caracteres que no son seguros para URL (los caracteres seguros para URL son, en su mayoría, las letras del alfabeto inglés a-z mayúscula y minúscula, además de un pequeño conjunto de signos de puntuación). Por ejemplo, el valor UTF-8 y con codificación URL para la letra "è" es "%C3%A8" y para el carácter chino 駅 es "%E9%A7%85". La mayoría de los navegadores te permiten usar un valor sin codificación en la string de URL (por ejemplo, 駅) y lo codificarán por ti en segundo plano.
Sin embargo, es posible que alguien que esté viendo la URL de tu imagen use un navegador que no lo haga, por lo que, por lo general, se recomienda usar UTF-8 y codificar en URL todos los caracteres que no son ASCII en las strings de texto. Ten en cuenta que esto es solo para el texto que se muestra en cuadros o marcadores, no para los caracteres &, | ni otros que forman parte de la sintaxis de la URL.
Sombras
Puedes agregar sombras a muchos íconos o incluso dibujar sombras para algunos íconos sin el ícono en sí.
Íconos sombreados 
Muchos de estos íconos se pueden dibujar con o sin sombras. Si es una opción, el nombre del ícono tendrá una versión que termine en _withshadow y otra sin esa terminación. Puedes especificar un ícono con una terminación, según si deseas la sombra o no.
Este es un ejemplo de una burbuja de texto mediana y un marcador con y sin sombras:
 chst=d_bubble_icon_text_big |
 chst=d_bubble_icon_text_big_withshadow |
 chst=d_map_pin_icon |
 chst=d_map_pin_icon_withshadow |
Sombras independientes 
Algunos tipos de íconos te permiten dibujar su sombra por sí solo. Te recomendamos que lo hagas si usas varios íconos con sombra superpuestos en un gráfico y están tan cerca que la sombra de uno cae sobre otro gráfico. Consulta la documentación de tu tipo de ícono específico para saber si puedes dibujar la sombra sola.