Gráfico de mapas (versión obsoleta)

 

Alerta de reemplazo: Este gráfico de mapa se reemplazó por una versión más reciente.

En esta página, se describe cómo crear un mapa de color usando la API de Charts.

Índice

Funciones específicas de los gráficos Descripción general Códigos de estado de Estados Unidos

Funciones estándar Título del gráfico (chtt, chts) Márgenes del gráfico (chma) Rellenos de fondo Solid Fills (chf)

Descripción general

Puedes crear un mapa con varios países o estados destacados con colores personalizados. Para indicar un mapa, deberás indicar en qué región del mundo se debe hacer zoom. También especificarás una lista de regiones a las que se debe aplicar color en el mapa y una lista de datos paralelas que asigna un valor numérico a cada país correspondiente. Cada país recibe un color a lo largo de un gradiente, según el valor que se le asigne. De manera opcional, puedes especificar un gradiente de color personalizado para los valores de datos.

Los gráficos de mapas admiten los siguientes parámetros:

Parámetro	Obligatorio u opcional	Descripción
cht=t	Obligatorio	Especifica un gráfico de mapa.
chs	Obligatorio	Tamaño del mapa. El tamaño máximo de un mapa es de 440 x 220.
chtm=<zoom_area>	Obligatorio	El área geográfica se muestra en el gráfico. zoom_area: uno de los siguientes valores africa asia europe middle_east south_america usa world
chld=<country_or_state_codes>	Obligatorio	Una lista de países o estados a los que aplicas valores. códigos_de_país_o_estado: Son un conjunto de códigos de dos caracteres sin delimitadores en el medio. Usa cualquiera de los siguientes tipos (no puedes combinar tipos): Códigos ISO 3166-1-alpha-2 para países Códigos de estado de EE.UU. Ejemplo: chld=DZEGMG.
chd=<country_values>	Obligatorio	Una lista de valores paralelos a la lista de regiones, en la que el valor se aplica a la región correspondiente. Los valores son valores de datos con formato estándar. A cada región se le asignará un color a lo largo de la escala especificada en chco, donde el valor más bajo del rango se aplica al color más bajo y el valor más alto de ese rango se aplica al último color. country_values: Una lista con la string de formato adecuada. Ejemplos: t:10,20,30, s:aU2Ff y e:BaPoqM-A.
chco=<default_color>,<start_of_gradient>,...,<end_of_gradient>	Opcional	Un rango de colores que corresponden a los valores de datos bajo y alto para el rango de formato de datos. Los valores de los datos se convierten en valores de color a lo largo de este gradiente y se aplican a los países correspondientes. default_color: [opcional] Es el color de las regiones que no tienen datos asignados. El valor predeterminado es BEBEBE (gris medio). Es un número hexadecimal con formato RRGGBB. start_of_gradient: [opcional] Es el color que corresponde al valor mínimo del rango de formato de datos. El valor predeterminado es 0000FF (azul). Es un número hexadecimal con formato RRGGBB. ... - [Opcional] Puedes tener todos los colores intermedios que quieras. end_of_gradient: [opcional] Es el color que corresponde al valor máximo del rango de formato de datos. El valor predeterminado es FF0000 (rojo). Un número hexadecimal con formato RRGGBB
chtt, chts	Opcional	Título y estilo del gráfico
chma	Opcional	Márgenes del gráfico
chf=bg	Opcional	Rellenos sólidos (solo fondo)

 

Ejemplos

Descripción	Ejemplo
En este ejemplo, sucede lo siguiente: El área de zoom del gráfico es África (chtm=africa). Se les asignarán valores a los tres países: Argelia, Egipto y Madagascar (chld=DZEGMG). Los tres valores asignados a esos países son 0, 100 y 50 respectivamente (chd=t:0,100,50), que son los valores mínimo, máximo y medio para los datos de formato de texto. El rango de colores es rojo para 0, verde para 100 y blanco para países sin asignar (chco=FFFFFF,FF0000,00FF00). El gráfico también tiene un relleno de fondo celeste (chf=bg,s,EAF7FE).	cht=t chtm=africa chld=DZEGMG chd=t:0,100,50 chco=FFFFFF,FF0000,00FF00 chf=bg,s,EAF7FE
Este gráfico es similar al anterior, pero con más detalles.	chtm=africa chld=DZEGMGAOBWNGCFKECGCVSNDJTZGHMZZM chco=FFFFFF,FF0000,FFFF00,00FF00 chd=t:0,100,50,32,60,40,43,12,14,54,98,17,70,76,18,29 chf=bg,s,EAF7FE
En este gráfico, se especifica que no hay países destacados mediante la especificación de un único valor indefinido (chd=t:-1).	chs=440x220 chd=t:-1 cht=t chtm=world

Volver al principio

Códigos de estado de Estados Unidos

A continuación, se muestran los códigos de estado admitidos cuando el mapa se acerca a Estados Unidos (chld=usa).

AL	Alabama	LA	Luisiana	OH	Ohio
AK	Alaska	ME	Maine	Aceptar	Oklahoma
AZ	Arizona	MD	Maryland	O	Oregón
AR	Arkansas	MA	Massachusetts	PA	Pensilvania
CA	California	MI	Míchigan	RI	Rhode Island
CO	Colorado	MN	Minnesota	SC	Carolina del Sur
CT	Connecticut	MS	Misisipi	SD	Dakota del Sur
DE	Delaware	MO	Misuri	TN	Tennessee
FL	Florida	MT	Montana	TX	Texas
GA	Georgia	NE	Nebraska	UT	Utah
HI	Hawái	NV	Nevada	VT	Vermont
ID	Idaho	NH	Nuevo Hampshire	VA	Virginia
IL	Illinois	NJ	Nueva Jersey	WA	Washington
IN	Indiana	NM	Nuevo México	WV	Virginia Occidental
IA	Iowa	NY	Nueva York	WI	Wisconsin
KS	Kansas	NC	Carolina del Norte	WY	Wyoming
KY	Kentucky	ND	Dakota del Norte

Volver al principio

Funciones estándares

El resto de los atributos de esta página son atributos de gráficos estándar.

Título del gráfico chtt, chts [Todos los gráficos]

Puedes especificar el texto del título, el color y el tamaño de la fuente de tu gráfico.

Sintaxis

chtt=<chart_title>
chts=<color>,<font_size>,<opt_alignment>

 

chtt: Especifica el título del gráfico.

<chart_title>

Título para mostrar en el gráfico. No puedes especificar dónde aparece, pero puedes indicar, de manera opcional, el tamaño y el color de la fuente. Usa el signo + para indicar espacios y un carácter de barra vertical ( |) para indicar los saltos de línea.

 

chts [Opcional]: Colores y tamaño de fuente para el parámetro chtt.

<color>

Es el color del título, en formato hexadecimal RRGGBB. El color predeterminado es el negro.

<font_size>

Es el tamaño de la fuente del título, en puntos.

<opt_alignment>

[Opcional] Alineación del título. Elige uno de los siguientes valores de cadena que distinguen mayúsculas de minúsculas: "l" (izquierda), "c" (centrado) "r" (derecha). El valor predeterminado es "c".

 

Ejemplos

Descripción	Ejemplo
Un gráfico con un título, con el color y el tamaño de fuente predeterminados. Especifica un espacio con un signo más (+). Usa un carácter de barra vertical (|) para forzar un salto de línea. chts no se especifica aquí.	chtt=Site+visitors+by+month| January+to+July
Un gráfico con un título azul de 20 puntos alineado a la derecha.	chtt=Site+visitors chts=FF0000,20,r

Volver al principio

Márgenes del gráfico chma [Todos los gráficos]

Puedes especificar el tamaño de los márgenes del gráfico en píxeles. Los márgenes se calculan hacia adentro a partir del tamaño de gráfico especificado (chs); aumentar el tamaño del margen no aumenta el tamaño total del gráfico, sino que se reduce el área del gráfico, si es necesario.

De forma predeterminada, los márgenes son los que restan después de calcular el tamaño del gráfico. Este valor predeterminado varía según el tipo de gráfico. Los márgenes que especifiques serán un valor mínimo. Si el área del gráfico deja espacio para los márgenes, el tamaño de los márgenes será el que quede. No puedes apretar los márgenes más pequeños que el requerido para las leyendas y las etiquetas. A continuación, se incluye un diagrama que muestra las partes básicas de un gráfico:

Los márgenes del gráfico incluyen las etiquetas del eje y el área de leyenda. El área de la leyenda cambia de tamaño automáticamente para adaptarse con exactitud al texto, a menos que especifiques un ancho más grande con chma. En ese caso, se expandirá el tamaño del margen y se reducirá el área del gráfico. No puedes recortar una leyenda especificando un tamaño demasiado pequeño, pero puedes hacer que ocupe más espacio del necesario. Sugerencia: En un gráfico de barras, si las barras tienen un tamaño fijo (el predeterminado), el ancho del área del gráfico no se puede reducir. Debes especificar un tamaño de barra más pequeño o que se pueda cambiar de tamaño con chbh.

 

Sintaxis

chma=
  <left_margin>,<right_margin>,<top_margin>,<bottom_margin>|<opt_legend_width>,<opt_legend_height>

<left_margin>, <right_margin>, <top_margin>, <bottom_margin>

Tamaño mínimo del margen alrededor del área del gráfico, en píxeles. Aumenta este valor para incluir padding a fin de evitar que las etiquetas de los ejes choquen contra los bordes del gráfico.

<opt_legend_width>, <opt_legend_height>

[Opcional] Ancho del margen alrededor de la leyenda, en píxeles. Usa esto para evitar que la leyenda sobresalga contra el área del gráfico o los bordes de la imagen.

 

Ejemplos

Descripción	Ejemplo
En este ejemplo, el gráfico tiene un margen mínimo de 30 píxeles en cada lado. Como la leyenda del gráfico tiene más de 30 píxeles de ancho, el margen del lado derecho se establece en el ancho de la leyenda del gráfico y es diferente de los demás márgenes. Las etiquetas de los ejes están fuera del área de trazado y, por lo tanto, se dibujan dentro del espacio del margen.	chma=30,30,30,30
Para agregar un margen alrededor de la leyenda, establece un valor para los parámetros <opt_legend_width> y <opt_legend_height>. En este ejemplo, la leyenda tiene aproximadamente 60 píxeles de ancho. Si estableces <opt_legend_width> en 80 píxeles, el margen se extiende hasta 20 píxeles fuera de la leyenda.	chma=20,20,20,30|80,20

Volver al principio

Relleno de fondo chf [todos los gráficos]

Puedes especificar colores y estilos de relleno para el área de datos del gráfico o todo el fondo del gráfico. Los tipos de relleno incluyen rellenos sólidos, rellenos a rayas y gradientes. Puedes especificar diferentes rellenos para distintas áreas (por ejemplo, el área completa del gráfico o solo el área de datos). El relleno del área del gráfico reemplaza el relleno del fondo. Todos los rellenos se especifican con el parámetro chf, y puedes mezclar diferentes tipos de relleno (sólidos, franjas y gradientes) en el mismo gráfico si separas los valores con el carácter de barra vertical ( | ). Los rellenos del área del gráfico reemplazan los rellenos del fondo del gráfico.

Llenado continuo chf [todos los gráficos]

Puedes especificar un relleno sólido para el fondo o el área del gráfico, o bien asignar un valor de transparencia a todo el gráfico. Puedes especificar varios rellenos con el carácter de barra vertical (|) (Maps: solo fondo).

Sintaxis

chf=<fill_type>,s,<color>|...

<fill_type>.

Es la parte del gráfico que se va a completar. Especifica uno de los siguientes valores:

• bg: Relleno de fondo
• c: Relleno del área del gráfico. No es compatible con los gráficos de mapas.
• a: Hace que todo el gráfico (incluidos los fondos) sea transparente. Se ignoran los primeros seis dígitos de <color> y solo los dos últimos (el valor de transparencia) se aplican a todo el gráfico y a todos los rellenos.
• b<index>: Relleno sólido de barras (solo gráficos de barras). Reemplaza <index> por el índice de la serie de las barras para rellenar con un color sólido. El efecto es similar a especificar chco en un gráfico de barras. Consulta Colores de serie de gráficos de barras para ver un ejemplo.

s

Indica un relleno sólido o transparente.

<color>

El color de relleno, en formato hexadecimal RRGGBB. Para las transparencias, los primeros seis dígitos se ignoran, pero se deben incluir de todos modos.

 

Ejemplos

Descripción	Ejemplo
En este ejemplo, se rellena el fondo del gráfico con gris pálido (EFEFEF).	chf=bg,s,EFEFEF
En este ejemplo, se rellena el fondo del gráfico con gris pálido (EFEFEF) y el área del gráfico en negro (000000).	chf=c,s,000000| bg,s,EFEFEF
En este ejemplo, se aplica una transparencia del 50% a todo el gráfico (80 en hexadecimal es 128 o una transparencia de alrededor del 50%). Observa el fondo de la celda de la tabla que se muestra a través del gráfico.	chf=a,s,00000080

Volver al principio

Formato de color

Especifica los colores con una string de 6 caracteres de valores hexadecimales, más dos valores de transparencia opcionales, en el formato RRGGBB[AA]. Por ejemplo:

• FF0000 = Rojo
• 00FF00 = Verde
• 0000FF = Azul
• 000000 = Negro
• FFFFFF = Blanco

AA es un valor de transparencia opcional, en el que 00 es completamente transparente y FF es completamente opaco. Por ejemplo:

• 0000FFFF = Luz azul continua
• 0000FF66 = Azul transparente

Volver al principio