Gráfico de mapas (versión obsoleta)

 

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

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

Índice

Funciones específicas del gráfico

  1. Overview
  2. Códigos de los Estados Unidos

Funciones estándares

  1. Título del gráfico (chtt, chts)
  2. Márgenes del gráfico (chma)
  3. Rellenos de fondo
    1. Rellenos sólidos (chf)

Descripción general

Puedes crear un mapa con varios países o estados destacados con colores personalizados. Para especificar un mapa, debes indicar en qué región del mundo se debe acercar. También especificarás una lista de regiones que se deben colorear en el mapa y una lista de datos paralelas que asigna un valor numérico a cada país correspondiente. Cada país se colorea con un gradiente, según el valor asignado. 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 440 x 220.
chtm=<zoom_area> Obligatorio

Corresponde al área geográfica que 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 aplica valores.

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 en la escala especificada en chco, en la que el valor más bajo del rango se aplicará al color más bajo y el valor más alto de ese rango se aplicará al último color.

  • country_values: Una lista en la string de formato adecuado. Ejemplos: t:10,20,30, s:aU2Ff y e:BaPoqM-A.
chco=<default_color>,<start_of_gradient>,...,<end_of_gradient> Opcional

Es un rango de colores que corresponden a los valores de datos bajos y altos para el rango de formato de datos. Los valores de datos se convierten en valores de color junto con este gradiente y se aplican a los países correspondientes.

  • default_color [opcional]: el color de las regiones que no tienen datos asignados. El valor predeterminado es BEBEBE (gris medio). Un número hexadecimal de formato RRGGBB.
  • start_of_gradient: [opcional] es el color que corresponde al valor mínimo en el rango de formato de datos. El valor predeterminado es 0000FF (azul). Un número hexadecimal de formato RRGGBB.
  • ... - [Opcional] Puedes tener tantos colores intermedios como quieras.
  • end_of_gradient: [opcional] es el color que corresponde al valor máximo en el rango de formato de datos. El valor predeterminado es FF0000 (rojo). Un número hexadecimal en 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 en segundo plano)

 

Ejemplos

Descripción Ejemplo

En este ejemplo:

  • El área de zoom del gráfico es África (chtm=africa).
  • Se 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 en 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).

Mapa de África
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.

Mapa de África
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 se destaca ningún país mediante la especificación de un valor único no definido (chd=t:-1).

Mapa del mundo
chs=440x220
chd=t:-1
cht=t
chtm=world

Volver al principio

Códigos de los Estados Unidos

A continuación, se muestran los códigos de estado que se admiten cuando se hace zoom en el mapa de 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 Michigan RI Rhode Island
CO Colorado MN Minesota SC Carolina del Sur
CT Connecticut MS Misisipi SD Dakota del Sur
DE Delaware MO Misuri VN 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 las funciones de esta página son funciones estándar del gráfico.

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

Puedes especificar el texto, el color y el tamaño de fuente del título para 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 que se mostrará para el gráfico. No puedes especificar dónde aparece esta opción, pero sí puedes especificar el tamaño y el color de la fuente. Usa el signo + para indicar los espacios y un carácter de barra vertical ( |) para indicar los saltos de línea.

 

chts (opcional): Colores y tamaño de fuente del parámetro chtt.

<color>
Es el color del título, en formato hexadecimal RRRGGBB. 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). La configuración predeterminada 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í.

Gráfico de barras verticales con título
chtt=Site+visitors+by+month|
January+to+July

Un gráfico con un título azul de 20 puntos alineado a la derecha.

Gráfico de barras verticales con azul, 20 píxeles, título
chtt=Site+visitors
chts=FF0000,20,r

Volver al principio

Márgenes de gráficos chma [todos los gráficos]

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

De forma predeterminada, los márgenes son los que quedan 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 especificas son un valor mínimo. Si el área del gráfico deja lugar para los márgenes, el tamaño del margen será el que quede. No puedes apretar los márgenes más pequeños de lo necesario para cualquier leyenda o etiqueta. A continuación, se incluye un diagrama en el que se muestran las partes básicas de un gráfico:

Margen del gráfico, área de la leyenda y área del gráfico

Los márgenes del gráfico incluyen las etiquetas de ejes y el área de la leyenda. El área de la leyenda cambia su tamaño automáticamente para ajustarse al texto con exactitud, a menos que especifiques un ancho mayor con chma, en cuyo caso se expandirá el tamaño del margen y se reducirá el área del gráfico. No puedes recortar una leyenda mediante la especificación de 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 valor predeterminado), no se puede reducir el ancho del área del gráfico. 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> y <bottom_margin>
Tamaño de margen mínimo alrededor del área del gráfico, en píxeles Aumenta este valor para incluir algo de padding y evitar que las etiquetas de los ejes profundicen en los bordes del gráfico.
<opt_legend_width>, <opt_legend_height>
[Opcional] Es el ancho del margen alrededor de la leyenda, en píxeles. Usa esta opción para evitar que la leyenda aparezca sobre 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 por cada lado. Debido a que 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.

Gráfico de líneas con fondo gris y márgenes en cada lado.
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 a 20 píxeles fuera de la leyenda.

Gráfico de líneas con fondo gris y márgenes en cada lado.
chma=20,20,20,30|80,20

Volver al principio

El fondo rellena chf [todos los gráficos]

Puedes especificar colores de relleno y estilos para el área de datos 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, toda el área 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, rayas, gradientes) en el mismo gráfico separando los valores con el carácter de barra vertical ( | ). Los rellenos del área del gráfico reemplazan los rellenos del fondo del gráfico.

Rellenos sólidos 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 en segundo plano).

Sintaxis

chf=<fill_type>,s,<color>|...
<fill_type>
La parte del gráfico que se rellena. 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: Haz que todo el gráfico (incluidos los fondos) sea transparente. Los primeros seis dígitos de <color> se ignoran y solo los dos últimos (el valor de transparencia) se aplican a todo el gráfico y a todos los rellenos.
  • b<index>: Rellenos sólidos de barras (solo gráficos de barras). Reemplaza <index> por el índice de serie de las barras para rellenar con un color sólido. El efecto es similar al de especificar chco en un gráfico de barras. Consulta Colores de la serie del gráfico de barras para ver un ejemplo.
s
Indica un relleno sólido o de transparencia.
<color>
Es el color de relleno, en formato hexadecimal RRRGGBB. En el caso de las transparencias, los primeros seis dígitos se ignoran, pero deben incluirse de todos modos.

 

Ejemplos

Descripción Ejemplo

En este ejemplo, se rellena el fondo del gráfico con gris pálido (EFEFEF).

Gráfico de líneas roja con relleno de área negro.

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 con negro (000000).

Gráfico de líneas rojo con un área del gráfico negra y fondo gris pálido.

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 alrededor del 50% de transparencia). Observa el fondo de celda de la tabla que se muestra a través del gráfico.

Diagrama de dispersión con puntos en azul y una transparencia del 50%.

chf=a,s,00000080

Volver al principio

Formato de color

Especifica 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