Gráficos de mapas

En esta página, se describe cómo crear un mapa de color usando la API de Charts. Este gráfico es una versión nueva y mejorada que admite un mapa más grande y más funciones que el gráfico de mapas anterior (cht=t).

Índice

Funciones específicas de los gráficos

  1. Descripción general
  2. Parámetros admitidos
  3. Cómo hacer zoom y centrar

Funciones estándar

  1. Título del gráfico (chtt, chts)
  2. Colores del gráfico (chco)
  3. Márgenes del gráfico (chma)
  4. Rellenos de fondo
    1. Solid Fills (chf)
  5. Leyendas de gráficos (chdl, Chdlp)
  6. Marcadores de formas (chm)
  7. Text and Data Markers (chm) [Marcadores de texto y datos]

Descripción general

Puedes crear un mapa con varios países o estados destacados con colores personalizados. Puedes permitir que el mapa se acerque al nivel adecuado para mostrar los países seleccionados correctamente, o bien puedes acercar o alejar la imagen a un nivel personalizado mediante los valores de latitud y longitud.

Parámetros compatibles

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

Parámetro Obligatorio u opcional Descripción
cht=map<opt_zoom_and_center> Obligatorio

Especifica un gráfico de mapa.

opt_zoom_and_center: es una cadena opcional que te permite acercar o centrar el gráfico en una región específica. Consulte los detalles.

chs Obligatorio Tamaño del mapa. Las dimensiones máximas de un mapa son de 600 píxeles de ancho, 600 píxeles de alto y 300,000 píxeles en total.
chd=
 <first_country_value>,
 ...,
 <last_country_value>
Opcional Si se usa, el valor de los datos indicará el color del país correspondiente, a lo largo del gradiente de color especificado por chco.
chld=
 <country_or_region_codes>|...|
Obligatorio

Una lista de países o estados separados por barras verticales que se destacarán con los colores especificados por chco. El mapa se ampliará automáticamente para incluir todos los países especificados, a menos que utilices funciones personalizadas de acercamiento o centro. Los códigos deben estar en mayúsculas. Estos códigos son códigos ISO 3166-1-alpha-2: dos caracteres en mayúsculas, seguidos opcionalmente de un guion y un segundo identificador para regiones o ciudades. Ejemplos: GB (Gran Bretaña), GB-LND (Londres), US-NJ (estado de Nueva Jersey en Estados Unidos)

chco

  • Si no se usa chd:
    chco=
     <unselected_land_color>|
     <first_region_color>|
       ...|
     <last_region_color>
  • Si se usa chd:
    chco=
     <unselected_land_color>,
     <color_range_start>,
       ...,
     <color_range_end>
Opcional

Colores del gráfico. El formato de esta string depende de si usas chd o no. En ambas sintaxis, <unselected_land_color> es el color de cualquier región no especificada en chld. Ten en cuenta que los divisores son diferentes para las distintas sintaxis (comas en una, barras en la otra). Si no se usan, las regiones estarán delineadas, pero no se colorearán.

  • chd ( usado): El segundo color y los posteriores describen un rango de colores. Debes tener un valor de chd para cada país en chld. El país correspondiente se coloreará a lo largo de un rango que va de <first_region_color> (valor mínimo de rango de datos) a <last_region_color> (valor máximo de rango de datos). Consulta los ejemplos que se indican en la siguiente tabla.
  • chd no utilizado: El segundo color y los posteriores se aplican a las regiones correspondientes de chld, en el orden enumerado. Si hay más países que colores, el último color se aplicará a todos los demás países de la lista.
chtt, chts Opcional Título y estilo del gráfico
chm Opcional Marcadores del gráfico
chma Opcional Márgenes del gráfico
chf=bg... Opcional Rellenos sólidos (solo fondo)
chdl Opcional Leyendas del gráfico

 

Ejemplos

Descripción Ejemplo

En este ejemplo, sucede lo siguiente:

  • cht=map:fixed=-60,0,80,-35: El área de zoom del gráfico es de -60 de latitud a 80 de latitud y de 0 a -35 de longitud.
  • chld=CA-BC|CN|IT|GR|US-UT: Las regiones más destacadas son Columbia Británica, China, Italia, Greeze y Utah.
  • chm: Muestra los marcadores de las marcas.
  • chma=0,110,0,0: El borde derecho se aumentó a 110 píxeles para que se ajuste correctamente a la leyenda.
  • chtt=Last+Five+Olympic+Hosts: Es el título del gráfico. Se usa el signo + para indicar espacios.

Mapa de cinco países anfitriones olímpicos con marcadores de banderas
cht=map:fixed=-60,0,80,-35
chs=600x350
chld=CA-BC|CN|IT|GR|US-UT
chdl=Vancouver|Beijing|Torino|Athens|Salt+Lake+City
chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274
chtt=Last+Five+Olympic+Hosts
chm=f2010+Winter,000000,0,0,10
f2008+Summer,000000,0,1,10
f2008+Winter,000000,0,2,10,1,:-5:10
f2004+Summer,000000,0,3,10
f2004+Summer,000000,0,4,10
chma=0,110,0,0

Mapa que muestra Francia, con dos regiones destacadas:

  • chld=FR-D|FR-B|FR: Se especifican tres regiones: Borgoña (en el este), Aquitania (en el suroeste) y Francia.
  • chco=676767|FF4444|44FF44|4444FF: No se especifica ningún parámetro chd en este mapa, por lo que cada valor de color después del primero se usa para especificar el país correspondiente. Rojo para Borgoña, verde para Aquitania y azul para Francia. Puedes ver que los colores posteriores no enmascaran los anteriores.
Mapa de Francia que destaca dos provincias
chld=FR-D|FR-B|FR
chco=676767|FF4444|44FF44|4444FF

En este mapa, se muestra el uso de gradientes de color.

  • chd=t:0,50,100: El parámetro chd indica un gradiente de color. Aquí, se especifica la codificación de texto, que tiene un rango de 0 a 100.
  • chco=CCCCCC,FF0000,000000: El color de fondo es el gris claro (CCCCCC), y el rango de color es del rojo (FF0000) al negro (000000). El país medio que se muestra es un color intermedio de ese gradiente.
Mapa que muestra gradientes de color.
chd=t:0,50,100
chco=CCCCCC,FF0000,000000
Ten en cuenta que el mapa se puede recortar dentro del tamaño de gráfico especificado. Esto se debe a que no distorsionaremos un mapa para que quepa en un tamaño de gráfico especificado, sino que lo limitaremos a las regiones que especifiques en chld. Por lo tanto, para evitar regiones recortadas dentro de los límites del gráfico, es posible que debas ajustar el tamaño del mapa de forma manual.
Mapa cuadrado de un país largo

cht=map
chs=300x300
chld=GB

Inglaterra es larga y delgada, por lo que, si se especifica un mapa cuadrado, se incluye un área recortada en el lado derecho:

Mapa cuadrado de un país largo

cht=map
chs=180x300
chld=GB

Ajuste el ancho del gráfico para recortar los excedentes. Observa que aún quedan algunos recortes en la parte inferior que deberían corregirse reduciendo la altura del mapa.

Mapa cuadrado de un país largo

cht=map
chs=180x300
chld=GB

Francia tiene una forma mucho más regular, por lo que encaja de forma más natural en un mapa cuadrado.

Volver al principio

Cómo hacer zoom y centrar

De forma predeterminada, el gráfico se acercará y se centrará para centrar las regiones seleccionadas y hacer que se ajusten al área renderizada lo más cerca posible, dentro del tamaño del mapa definido. Sin embargo, puedes personalizar el nivel de enfoque y zoom del gráfico de dos maneras diferentes:

Por píxel

Para ajustar los bordes según el tamaño de píxeles, usa el siguiente formato:

cht=map:auto=<left_border>,<right_border>,<top_border>,<bottom_border>

Donde cada tamaño de borde es el borde adicional que se mostrará, en píxeles, más allá del nivel de zoom calculado automáticamente.

Solo puedes alejar la imagen (valores positivos), pero no puedes acercarla (valores negativos) más cerca que el nivel de zoom predeterminado usando el zoom de píxeles.

Ejemplos:

Todos estos ejemplos muestran Londres (la

Sin zoom (predeterminado) Alejado de 30 píxeles por lado Alejado y hacia abajo a la derecha

Hay un exceso de mapa vacío en la parte inferior.
cht=map

Hay un mapa excedente en la parte inferior.
cht=map:auto=30,30,30,30
Se volvió a enmarcar el área de zoom.
cht=map:auto=50,0,80,0

 

Por latitud y longitud

Puedes especificar los bordes superior, inferior, izquierdo y derecho exactos del mapa renderizado por latitud y longitud mediante la sintaxis que se muestra a continuación:

cht=map:fixed=<bottom_border_lat>,<left_border_long>,<top_border_lat>,<right_border_long>

Donde <bottom_border_lat> y <top_border_lat> especifican la latitud de los bordes inferior y superior, y <left_border_long> y <right_border_long> especifican la longitud de los bordes izquierdo y derecho.

Nota: Debido a la distorsión de la proyección de Mercator (básicamente, la proyección de un mapa curvo sobre una imagen plana), enfocarte en una franja alta y angosta puede causar algunas diferencias de tamaño inesperadas en tu mapa.

Ejemplos:

En los siguientes ejemplos, se muestra Londres (resaltado en azul), que es una longitud de 0.1° y una latitud de 51.5°. Observa que se recorta el mapa porque el mapa intenta mostrar solo Gran Bretaña (como se especificó) y llenar el gráfico designado sin distorsión.

Centrado Las latitudes se desplazan +10* Zoom reduciendo todos los valores

cht=map:fixed=40,-10,60,10


cht=map:fixed=50,-10,70,10


cht=map:fixed=48,-3,54,3

Ten en cuenta que el tamaño de la imagen del medio es un poco más pequeño que el de la primera imagen, a pesar de que movimos la misma cantidad de grados hacia arriba. Esto se debe a que estamos proyectando una esfera 3D sobre una imagen en 2D. Deberás aumentar el ancho del segundo gráfico para que tenga el mismo tamaño que el primer gráfico.

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í.

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 título azul, 20 píxeles
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:

Margen, área de leyenda y área del 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.

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

Gráfico de líneas con fondo gris y márgenes a cada lado.
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).

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

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).

Gráfico de líneas roja con un área de gráfico negra y un 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 una transparencia de alrededor del 50%). Observa el fondo de la 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

Texto y estilo de la leyenda del gráfico chdl, chdlp, chdls [Todos los gráficos]

La leyenda es una sección lateral del gráfico que ofrece una pequeña descripción textual de cada serie. Puedes especificar el texto asociado a cada serie en esta leyenda y especificar el lugar del gráfico donde debe aparecer.

Consulta también chma para aprender a establecer los márgenes en la leyenda.

Nota sobre los valores de string: Solo se permiten caracteres seguros para URL en las strings de etiqueta. Para estar seguro, debes codificar en formato URL todas las strings que contengan caracteres que no se encuentren en el grupo de caracteres 0-9a-zA-Z. Puedes encontrar un codificador de URL en la Documentación de visualización de Google.

Sintaxis

chdl=<data_series_1_label>|...|<data_series_n_label>
chdlp=<opt_position>|<opt_label_order>
chdls=<color>,<size>

 

chdl: Es el texto de cada serie que se mostrará en la leyenda.

<data_series_label>
El texto de las entradas de la leyenda. Cada etiqueta se aplica a la serie correspondiente en el array chd. Usa la marca + para indicar un espacio. Si no especificas este parámetro, el gráfico no obtendrá una leyenda. No hay forma de especificar un salto de línea en una etiqueta. Por lo general, la leyenda se expandirá para contener el texto de la leyenda, y el área del gráfico se reducirá para acomodarla.

chdlp : Opcional: Es la posición de la leyenda y el orden de las entradas de la leyenda. Puedes especificar <position> o <label_order>. Si especificas ambos, sepáralos con un carácter de barra. Puedes agregar una “s” a cualquier valor si deseas que las entradas de leyenda vacías en chdl se omitan en la leyenda. Ejemplos: chdlp=bv, chdlp=r, chdlp=bv|r, chdlp=bvs|r

<opt_position>
(opcional): Especifica la posición de la leyenda en el gráfico. Para especificar un padding adicional entre la leyenda y el área del gráfico o el borde de la imagen, usa el parámetro chma. Elige uno de los siguientes valores:
  • b: Leyenda en la parte inferior del gráfico, entradas de leyenda en una fila horizontal.
  • bv: Leyenda en la parte inferior del gráfico, entradas de leyenda en una columna vertical.
  • t: Leyenda en la parte superior del gráfico, entradas de leyenda en una fila horizontal.
  • tv: Leyenda en la parte superior del gráfico, entradas de leyenda en una columna vertical.
  • r: [Predeterminado] Leyenda a la derecha del gráfico, entradas de leyenda en una columna vertical.
  • l: Leyenda que se encuentra a la izquierda del gráfico y entradas de leyenda en una columna vertical.
<opt_label_order>
(opcional): Es el orden en el que se muestran las etiquetas en la leyenda. Elige uno de los siguientes valores:
  • l: [Predeterminado para leyendas verticales] Muestra las etiquetas en el orden asignado a chdl.
  • r: Muestra las etiquetas en el orden inverso, según se indica a chdl. Esto es útil en los gráficos de barras apiladas para mostrar la leyenda
    en el mismo orden en que aparecen las barras.
  • a: [Predeterminado para leyendas horizontales] Orden automático: Significa ordenar por longitud, más corto primero, medido en bloques de 10 píxeles. Cuando dos elementos tienen la misma longitud (divididos en bloques de 10 píxeles), el que se enumera primero aparecerá primero.
  • 0,1,2...: Orden de las etiquetas personalizadas. Esta es una lista de índices de etiquetas basados en cero de chdl, separados por comas.

chdls: Especifica el color y el tamaño de la fuente del texto de la leyenda [opcional].

<color>
El color del texto de la leyenda, en formato hexadecimal RRGGBB.
<size>
El tamaño en puntos del texto de la leyenda.

 

Ejemplos

Descripción Ejemplo

Dos ejemplos de leyendas. Especifica el texto de la leyenda en el mismo orden que las series de datos.

Gráfico de líneas rojo, azul y verde con leyendas que coinciden

chdl=NASDAQ|FTSE100|DOW
chco=FF0000,00FF00,0000FF

Diagrama de Venn con dos círculos más pequeños encerrados por un círculo más grande


chdl=First|Second|Third
chco=ff0000,00ff00,0000ff

En el primer gráfico, se muestran las entradas de leyenda horizontal (chdlp=t, el diseño predeterminado es horizontal) y, en el segundo, se muestran las entradas de leyenda vertical inferiores (chdlp=bv).

Diagrama de Venn con dos círculos más pequeños encerrados por un círculo más grande
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
chdlp=t


Diagrama de Venn con dos círculos más pequeños encerrados por un círculo más grande
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
chdlp=bv

En este ejemplo, se muestra cómo cambiar el tamaño de fuente.

Diagrama de Venn con dos círculos más pequeños encerrados por un círculo más grande
chdls=0000CC,14

Volver al principio

Marcadores de formas chm [Barra, línea, radar y dispersión]

Puedes especificar marcadores gráficos para todos los datos o para cada uno de ellos de un gráfico. Si dos o más marcadores ocupan el mismo punto, se dibujan en el orden en que aparecen en el parámetro chm. También puedes crear marcadores de texto en datos. Este tema se aborda en Marcadores de datos.

Puedes combinar marcadores de forma con cualquier otro parámetro chm mediante un carácter de barra vertical ( |) para separar los parámetros chm.

Sintaxis

Especifica un conjunto de los siguientes parámetros para cada serie que se deba marcar. Para marcar varias series, crea conjuntos de parámetros adicionales, delimitados por un carácter de barra vertical. No es necesario que marques todas las series. Si no asignas marcadores a una serie de datos, esta no obtendrá ningún marcador.

Los marcadores de formas se comportan de un modo ligeramente distinto en los diagramas de dispersión. Consulta esa documentación para obtener más información.

chm=
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
    |...|
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
@
(opcional): Si antecedes el tipo de marcador con el carácter opcional @, entonces <opt_which_points> debe usar el formato x:y.
<marker_type> ,
Es el tipo de marcador que se usará. Especifica uno de los siguientes tipos:
  • a: Flecha
  • c: Cruz
  • C: Rectángulo. Si se trata de un marcador rectangular, debes tener al menos dos series de datos, en las que la serie 0 especifica el borde inferior y la serie 1 especifica el borde superior. <size> especifica el ancho del rectángulo en píxeles.
  • d: Diamante
  • E: Marcador de barra de error ( ). Este marcador requiere dos series de datos para crearse: un valor para la parte inferior y el punto correspondiente en la segunda serie para la parte superior. También expone una sintaxis extendida de <size>: line_thickness[:top_and_bottom_width], donde top_and_bottom_width es opcional. Consulta los ejemplos que aparecen a continuación
  • h: Es la línea horizontal del gráfico a una altura especificada. (El único formato válido para el parámetro <opt_which_points> es n.d).
  • H: Línea horizontal que atraviesa el marcador de datos especificado. Esto admite una sintaxis extendida de <size> que te permite especificar una longitud exacta de línea: line_thickness[:length] en la que :length es opcional y el ancho predeterminado es el ancho completo del área del gráfico.
  • o: Círculo
  • s - Cuadrado
  • v: Línea vertical desde el eje X hasta el punto de datos
  • V: Línea vertical de longitud ajustable. Esto admite una sintaxis de valor <size> extendida que te permite especificar una longitud de línea exacta: line_thickness[:length] en el que :length es opcional y la altura predeterminada es la altura del área del gráfico completa. El marcador está centrado en el punto de datos.
  • x: una X
<color>
: Es el color de los marcadores de esta serie en formato hexadecimal RRGGBB.
<series_index>
Es el índice basado en cero de la serie de datos en la que se dibujarán los marcadores. Se ignora para los marcadores h y los marcadores que especifican la ubicación mediante la posición x/y (comienzan con el carácter @). Puedes usar series de datos ocultas como fuente de marcadores. Consulta Gráficos compuestos para obtener más información. Los gráficos de barras verticales agrupadas admiten una sintaxis especial extendida para alinear los marcadores con barras específicas.
<opt_which_points>
[Opcional] En qué puntos se trazarán los marcadores. La configuración predeterminada es Todos los marcadores. Usa uno de los siguientes valores:
  • n.d: Es el lugar en el que se dibuja el marcador. El significado depende del tipo de marcador:
    • Todos los tipos excepto h: Son los datos en los que se dibuja el marcador, donde n.d es el índice basado en cero de la serie. Si especificas un valor que no es un número entero, la fracción indica un punto intermedio calculado. Por ejemplo, 3.5 significa la mitad del camino entre los puntos 3 y 4.
    • h: Es un número del 0.0 al 1.0, en el que 0.0 es la parte inferior del gráfico y 1.0 es la parte superior.
  • -1: Dibuja un marcador en todos los puntos de datos. También puedes dejar este parámetro vacío para dibujar en todos los datos.
  • -n: Dibuja un marcador en cada punto de datos n. Valor de punto flotante; si n es menor que 1, el gráfico calculará puntos intermedios adicionales por ti. Por ejemplo, con -0.5 se duplicará la cantidad de marcadores que de datos.
  • start:end:n: Dibuja un marcador en cada dato n de un rango, desde los valores de índice start hasta end, inclusive. Todos los parámetros son opcionales (pueden estar ausentes), por lo que 3::1 sería del cuarto elemento al último, paso 1, y si se omite por completo este parámetro, el valor predeterminado será first:last:1. Todos los valores pueden ser números de punto flotante. start y end pueden ser negativos para contar hacia atrás desde el último valor. Si tanto inicio como finalización son negativos, asegúrate de que se incluyan en valor creciente (por ejemplo, -6:-1:1). Si el valor del paso n es menor que 1, calculará puntos de datos adicionales interpolando los valores de datos proporcionados. Los valores predeterminados son first:last:1
  • x:y: Dibuja un marcador en un punto X/y específico del gráfico. Este punto no tiene que estar en una línea. Para usar esta opción, agrega el carácter @ antes del tipo de marcador. Especifica las coordenadas como valores de punto flotante, en los que 0:0 es la esquina inferior izquierda del gráfico y 1:1 es la esquina superior derecha del gráfico. Por ejemplo, para agregar un diamante rojo de 15 píxeles al centro de un gráfico, usa @d,FF0000,0,0.5:0.5,15.
<size>
Es el tamaño del marcador en píxeles. La mayoría toma un solo valor numérico para este parámetro. Los marcadores V, H y S admiten la sintaxis <size>[:width], en la que la segunda parte opcional especifica la longitud de la línea o del marcador.
<opt_z_order>
[Opcional] Es la capa en la que se dibuja el marcador en comparación con otros marcadores y todos los demás elementos del gráfico. Este es un número de punto flotante de -1.0 a 1.0 inclusive, en el que -1.0 es la parte inferior y 1.0 es la parte superior. Los elementos del gráfico (líneas y barras) tienen un valor inferior a cero. Si dos marcadores tienen el mismo valor, se dibujan en el orden especificado por la URL. El valor predeterminado es 0.0 (justo encima de los elementos del gráfico).
<opt_offset>
(opcional): Te permite especificar desplazamientos horizontales y verticales desde la ubicación especificada. Esta es la sintaxis, que usa un delimitador :: reserved:<horizontal_offset>:<vertical_offset>. Si se especifica, puedes incluir un valor - vacío en la string del parámetro chm para <opt_z_order>. Ejemplos: o,FF9900,0,4,12,,:10 o,FF9900,0,4,12.0,,:-10:20 o,FF9900,0,4,12,1,::20
  • reservado: déjalo en blanco.
  • <horizontal_offset>: Es un número positivo o negativo que especifica el desplazamiento horizontal en píxeles. Opcional; déjalo en blanco si no se usa.
  • <vertical_offset>: Es un número positivo o negativo que especifica el desplazamiento vertical en píxeles. Opcional; déjalo en blanco si no se usa.

 

Ejemplos

Descripción Ejemplo

A continuación, se muestra un ejemplo de varios marcadores de forma y línea.

  • a,990066,0,0.0,9.0: Flecha púrpura, primera serie, primer punto, tamaño 9.
  • c,FF0000,0,1.0,20.0: Cruz roja, primera serie, segundo punto, tamaño 9.
  • d,80C65A,0,2,20.0: Rombo verde, primera serie, tercer punto, tamaño 9.
  • H,000000,0,3,1:40: Línea horizontal negra, primera serie, punto de datos 3, un píxel de ancho y cuarenta píxeles de largo.
  • o,FF9900,0,4.0,12.0: Círculo naranja, primera serie, quinto punto, tamaño 12.
  • s,3399CC,0,5.0,11.0: Cuadrado azul, primera serie, sexto punto, tamaño 11.
  • v,BBCCED,0,6.0,1.0: Línea vertical hasta punto, primera serie, séptimo punto, un píxel de ancho.
  • V,3399CC,0,7.0,1.0: Línea vertical desde la parte inferior hasta la parte superior del gráfico, primera serie, octavo punto, un píxel de ancho.
  • x,FFCC33,0,8.0,20.0: "X" amarilla, primera serie, noveno punto, tamaño 20.
  • H,FFFF00,0,9,2: Línea amarilla horizontal del ancho del gráfico en el punto de datos 9.
  • h,FF0000,0,0.5,1: Línea horizontal roja a la altura designada, primera serie, a la mitad del gráfico, un píxel de ancho.
Gráfico de líneas con marcadores
chm=
  a,990066,0,0.0,9.0|
  c,FF0000,0,1.0,20|
  d,80C65A,0,2.0,20.0|
  H,000000,0,3,1:40|
  o,FF9900,0,4.0,12.0|
  s,3399CC,0,5.0,11.0|
  v,BBCCED,0,6,1.0|
  V,3399CC,0,7,1.0|
  x,FFCC33,0,8,20|
  H,FFFF00,0,9,2|
  h,FF0000,0,0.5,1

A continuación, se muestra un ejemplo en el que se usan diamantes para una serie de datos y círculos para la otra serie de datos.

Si dos o más marcadores ocupan el mismo punto, se dibujan en el orden en que aparecen en el parámetro chm. Aquí, el círculo es el primer marcador especificado con chm, por lo que se dibuja primero. El diamante se especifica y se dibuja en segundo lugar, lo que hace que se dibuje encima del círculo.

Gráfico de líneas, una línea tiene círculos de 15 píxeles en cada punto de datos, mientras que la otra línea tiene 10 píxeles de diamante. Se dibuja un diamante en el punto que es común a ambas líneas.
chm=
  o,FF9900,0,-1,15.0|
  d,FF0000,1,-1,10.0

A continuación, se muestra un gráfico de líneas con un marcador cada segundo dato (-2 significa cada dos puntos).

Gráfico de líneas con un marcador en el segundo punto
chd=t:
  0,20,20,50,40,70,70,90,85,45,40,50
chm=
  o,0066FF,0,-2,6
El siguiente es un gráfico de líneas con el doble de marcadores que datos (-0.5 significa cada medio punto). Gráfico de líneas con un marcador en el segundo punto
chd=t:
  0,20,20,50,40,70,70,90,85,45,40,50
chm=
  o,0066FF,0,-.5,6
En este ejemplo, se muestra cómo usar los marcadores h y v para crear líneas de cuadrícula con colores y grosores personalizados. El valor de orden z (el último valor) se establece en -1 para que las líneas de la cuadrícula se dibujen debajo de la línea de datos.
Gráfico de líneas con un marcador en el segundo punto
chm=
  h,76A4FB,0,0:1:.2,2,-1|
  V,76A4FB,0,::2,0.5,-1

Este gráfico agrega líneas de relleno verticales a un gráfico de líneas:

  • v: Líneas verticales al gráfico
  • FF0000: Líneas rojas
  • 0: Índice de serie
  • : :.5: especificador de rango: de principio a fin, cada 0.5 puntos.
  • 2: Grosor de 2 píxeles.
Gráfico de líneas con un marcador en el segundo punto
chm=
  v,FF0000,0,::.5,2
En este ejemplo, se agrega una flecha y un marcador de texto al gráfico con coordenadas exactas. El primer marcador D es la línea de seguimiento debajo de las barras. El segundo marcador es la flecha y el tercer marcador es el texto de la flecha.
chm=
  D,003971,1,0,3|
  @a,000000,0,.25:.75,7|
  @tExpected,000000,0,.35:.85,10
Una línea horizontal fija a un dato específico (H) puede ser útil para mostrar valores relativos o enfatizar la altura de un valor de datos en un gráfico.
chm=H,FF0000,0,18,1

En este gráfico, se muestran los marcadores que pueden especificar el grosor y la longitud de las líneas en el parámetro <size>.

  • E,000000,0,6,1:20: Barra de error negra con líneas de ancho de 1 píxel, barras inferior y superior de 20 píxeles de largo. La parte inferior se fija a la serie 0 punto 8, y la parte superior se fija a la serie 1 punto 8.
  • H,990066,1,2,5:50: Púrpura, línea horizontal de cinco píxeles de ancho y cincuenta píxeles de largo centrada en el punto de datos 2.
  • V,3399CC,0,8,3:50: Línea vertical azul de 3 píxeles de ancho y cincuenta píxeles de largo, centrada en el punto de datos 8.
title="cht=lc&chd=s:2gounjqLaCf,jqLaCf2goun&chco=008000,00008033&chls=2.0,4.0,1.0&chs=250x150&chm=H,990066,1,2,5:30%7"
chm=
  E,000000,0,6,1:20|
  H,990066,1,2,5:50|
  V,3399CC,0,8,3:50

Volver al principio

Marcadores de valores de texto y datos chm [Barra, línea, radar y dispersión]

Puedes etiquetar puntos específicos de tu gráfico con texto personalizado o con versiones con formato de los datos en ese momento.

Puedes combinar cualquier marcador chm con un carácter de barra vertical ( |) para separar los conjuntos de parámetros de chm.

Nota sobre los valores de string: Solo se permiten caracteres seguros para URL en las strings de etiqueta. Para estar seguro, debes codificar en formato URL todas las strings que contengan caracteres que no se encuentren en el grupo de caracteres 0-9a-zA-Z. Puedes encontrar un codificador de URL en la Documentación de visualización de Google.

Sintaxis

Especifica un conjunto de los siguientes parámetros para cada serie que se deba marcar. Para marcar varias series, crea conjuntos de parámetros adicionales, delimitados por un carácter de barra vertical. No es necesario que marques todas las series. Si no asignas marcadores a una serie de datos, esta no obtendrá ningún marcador.

chm=
  <marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_placement>
    |...|
  <marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_placement>
<marker_type> ,
Es el tipo de marcador que se usará. Puedes elegir entre los siguientes tipos:
  • f<text>: Es una marca que contiene texto. Especifica el carácter "f" seguido del texto codificado para URL personalizado. Para escapar comas en los marcadores de texto, coloca el signo \ antes de la coma. Ejemplo: fHello\,+World!
  • t<text>: Es un marcador de texto simple. Especifica el carácter "t" seguido del texto codificado para URL personalizado. Para escapar comas en los marcadores de texto, coloca el signo \ antes de la coma. Ejemplo: tHello\,+World!
  • A<text>: Es un marcador de anotación. Es similar a un marcador de bandera, pero estos coordinarán su posición para que no se superpongan. El único formato válido para <opt_which_points> es n.d para indicar el índice de un punto en la serie.
  • N<formatting_string>: Es el valor de los datos en este punto, con formato opcional. Si no usas el parámetro chds (escalamiento personalizado), se proporciona el valor codificado exacto. Si usas ese parámetro con cualquier tipo de formato, el valor se escalará al rango que especifiques. Consulta un ejemplo de chds con marcadores numéricos a continuación. Con este tipo de marcador en un gráfico de barras apiladas, si especificas -1 para <series_index>, obtendrás un marcador que mostrará la suma de todos los valores de esta barra apilada. La sintaxis de la string de formato es la siguiente:
           <preceding_text>*<number_type><decimal_places>zs<x or y>*<following_text>.
    Todos estos elementos son opcionales. Este es el significado de cada elemento:
    • <preceding_text>: Es el texto que antecede a cada valor.
    • *...*: Es un bloque opcional encerrado entre asteriscos literales, en el que puedes especificar los detalles de formato de los números. Se admiten los siguientes valores y son opcionales:
      • <number_type>: Es el formato de número para valores numéricos. Elige una de las siguientes opciones:
        • f: [Predeterminado] Formato de punto flotante. Considera especificar la precisión también con el valor <decimal_places>.
        • p: Formato de porcentaje. El signo % se agrega automáticamente. Nota: Cuando se usa este formato, los valores de datos de 0.0 a 1.0 se asignan a 0-100% (por ejemplo, 0.43 se mostrará como 43%).
        • e: Formato de notación científica.
        • c<CUR>: Da formato al número en la moneda especificada con el marcador de moneda adecuado. Reemplaza <CUR> por un código de moneda de tres letras. Ejemplo: cEUR para euros. Puedes encontrar una lista de códigos en el sitio web de ISO, aunque no se admiten todos los símbolos.
      • <decimal_places>: Es un número entero que especifica cuántos decimales se muestran. El valor se redondea (no se trunca) a esta longitud. El valor predeterminado es 2.
      • z: Se muestran ceros finales. El valor predeterminado es no.
      • s: Muestra los separadores de grupo. El valor predeterminado es no.
      • x o y: Muestra los datos de la coordenada x o y, según se especifica. El significado de los datos de x varía según el tipo de gráfico: experimenta con tu gráfico para determinar qué significa. El valor predeterminado es “y”.
    • <following_text>: Es el texto que aparece después de cada valor.
<color>
: Es el color de los marcadores de este conjunto, en formato hexadecimal RRGGBB.
<series_index>
Es el índice basado en cero de la serie de datos en la que se dibujarán los marcadores. Si se trata de un gráfico de barras apiladas y el tipo de marcador es N (valores de puntos de datos), puedes especificar -1 para crear un marcador de valor sumado para cada pila de barras. A continuación, puedes ver un ejemplo.
<opt_which_points>
[Opcional] En qué puntos se trazarán los marcadores. La configuración predeterminada es Todos los marcadores. Usa uno de los siguientes valores:
  • n.d: Es el dato en el que se debe dibujar el marcador, donde n.d es el índice basado en cero de la serie. Si especificas un valor que no es un número entero, la fracción indica un punto intermedio calculado. Por ejemplo, 3.5 significa la mitad del camino entre el punto 3 y el punto 4.
  • -1: Dibuja un marcador en todos los puntos de datos. También puedes dejar este parámetro vacío para dibujar en todos los datos.
  • -n: Dibuja un marcador en cada punto de datos n.
  • start:end:n: Dibuja un marcador en cada dato n de un rango, desde los valores de índice start hasta end, inclusive. Todos los parámetros son opcionales (pueden estar ausentes), por lo que 3::1 sería del cuarto elemento al último, el paso 1, y si se omite por completo este parámetro, el valor predeterminado será first:last:1. Todos los valores pueden ser números de punto flotante. start y end pueden ser negativos para contar hacia atrás desde el último valor. Si tanto start como end son negativos, asegúrate de que se incluyan en valor creciente (por ejemplo, -6:-1:1). Si el valor del paso n es menor que 1, calculará puntos de datos adicionales interpolando los valores de datos proporcionados. Los valores predeterminados son first:last:1
  • x:y - [No se admite para marcadores de tipo N] Dibuja un marcador en un punto x/y específico del gráfico. Este punto no tiene que estar en una línea. Para usar esta opción, agrega el carácter arroba (@) antes del tipo de marcador. Especifica las coordenadas como valores de punto flotante, en los que 0:0 es la esquina inferior izquierda del gráfico, 0.5:0.5 es el centro del gráfico y 1:1 es la esquina superior derecha. Por ejemplo, para agregar un diamante rojo de 15 píxeles al centro de un gráfico, usa @d,FF0000,0,0.5:0.5,15.
<size>
Es el tamaño del marcador en píxeles. Si se trata de un diagrama de dispersión con una tercera serie de datos (que se usa para especificar tamaños de puntos), el rango de datos escalará este valor. Por lo tanto, si el rango de datos es de 0 a 100 y <size> es de 30, un valor de datos de 100 sería de 30 píxeles de ancho, un valor de datos de 50 sería de 15 píxeles de ancho, y así sucesivamente.
<opt_z_order>
[Opcional] Es la capa en la que se dibuja el marcador en comparación con otros marcadores y todos los demás elementos del gráfico. Este es un número de punto flotante de -1.0 a 1.0 inclusive, en el que -1.0 es la parte inferior y 1.0 es la parte superior. Los elementos del gráfico (líneas y barras) son un poco más bajos que cero. Si dos marcadores tienen el mismo valor, se dibujan en el orden especificado por la URL. El valor predeterminado es 0.0 (justo encima de los elementos del gráfico).
<opt_placement>
[Opcional] Detalles de posición adicionales que describen dónde colocar este marcador en relación con los datos. Puedes especificar el posicionamiento relativo horizontal o vertical, así como los desplazamientos. La sintaxis de posición es una string con delimitadores :, como se muestra aquí. Todos los elementos son opcionales: <horizontal_and_vertical_justification>:<horizontal_offset>:<vertical_offset>. Si se especifica, puedes incluir un valor - vacío en la string del parámetro chm para <opt_z_order>. Ejemplos: N,000000,0,1,10,,b, N,000000,0,1,10,,lv y N,000000,0,1,10,,r::10.
horizontal_and_vertical_justification
Es el punto de anclaje del marcador. Este comportamiento es opuesto a la justificación, por lo que un anclaje izquierdo en realidad coloca el marcador a la derecha del punto de datos. Puedes elegir un justificador horizontal o vertical de la siguiente lista:
  • Posición horizontal: “l”, “h” o “r”: izquierda, central o anclada a la derecha, horizontalmente El valor predeterminado es “l”.
  • Posición vertical: “b”, “v”, “t”: En la parte inferior, en el medio o en la parte superior, de forma vertical. El valor predeterminado es “b”.
  • Posición relativa de barras [solo gráficos de barras]: “s”, “c”, “e”: Indica la base, el centro o la parte superior de una barra. En el caso de los gráficos apilados, esto se relaciona con la sección de la barra para cada serie, no para toda la barra. Si el índice de la serie dado es -1 (total de la pila), se relaciona con toda la barra. Esto se puede combinar con valores de posición verticales, como "be" o "vs". El valor predeterminado es “e”.
horizontal_offset
Es el desplazamiento horizontal para este marcador, en píxeles. El valor predeterminado es 0.
vertical_offset
Es el desplazamiento vertical de este marcador, en píxeles. Valor predeterminado de gráfico de barras: 15; valor predeterminado de gráfico de barras: 2.

Descripción Ejemplo

Este es un ejemplo de etiquetas de valor en un gráfico de barras.

El primer gráfico (N*p0*) especifica un marcador de valor de datos, con los valores que se muestran como un porcentaje, redondeados a cero decimales, en negro, en todos los valores, en texto de 11 puntos. Ten en cuenta que todos los valores de los datos están entre 0.0 y 1.0, los cuales, en formato de porcentaje, se mueven dos decimales.

En el segundo gráfico (N*cEUR1*), se muestran los mismos valores con formato de euro, un decimal, en negro, en todos los valores y con texto de 11 puntos.

Gráfico de barras con etiquetas de porcentaje sobre cada barra
chm=
  N*p0*,000000,0,-1,11
chd=t:
  0.4356,0.3562,0.4834,0.575,0.673,0.6091


Gráfico de barras con etiquetas de euro arriba de cada barra


chm=
  N*cEUR1*,000000,0,-1,11

Puedes usar el parámetro chds para escalar el valor numérico que se muestra. Puedes usar chds para todos los formatos de datos, incluida la codificación simple y extendida. Esto no afectará el tamaño de la barra ni las etiquetas de los ejes, sino solo el valor del marcador de datos.

En este ejemplo, se muestra un gráfico con valores de codificación simple de 46, 39, 29, 30, 43, 41. El rango de codificación simple es de 0 a 61. El parámetro chds define una escala de marcador personalizada de 0 a 1, por lo que los valores de los marcadores se ajustan a este rango, pero las alturas de las barras no se ven afectadas (si estos fueran datos de formato de texto, las barras también se ajustarían).


chd=s:underp
chm=N,000000,0,-1,11
chds=0,1

Este es un ejemplo de un gráfico con una etiqueta de texto en el punto mínimo y una etiqueta de marca en el punto máximo.

Gráfico de líneas con una etiqueta de texto azul de 10 puntos y una bandera con texto rojo de 15 puntos, dibujada sobre los puntos de datos de una línea verde punteada.
chm=
  tMin,0000FF,0,1,10|
  fMax,FF0000,0,3,15

En este ejemplo, se muestra un gráfico apilado con valores para series individuales, más el total de la serie. Para mostrar los valores de la serie apilada, debemos usar la opción de posicionamiento “c”. De lo contrario, el valor de la barra superior se superpondrá con el valor de la suma en la parte superior de cada barra.
chm=
  N,FF0000,-1,,12|
  N,000000,0,,12,,c|
  N,000000,1,,12,,c|
  N,ffffff,2,,12,,c
Más demostraciones de cómo funcionan las posiciones verticales y horizontales. En este ejemplo, se muestran varias combinaciones de valores de anclaje para gráficos de barras (que usan s,c y e para la posición vertical). Observa cómo un anclaje derecho mueve un marcador hacia la izquierda, y un anclaje superior mueve un marcador hacia abajo y viceversa. Los puntos rojos muestran la base, el centro y la parte superior de cada barra. El número es el valor de los datos, que se fija con diferentes valores de anclaje para cada barra.
chm=
  N,000000,0,0,10,,rs
  N,000000,0,1,10,,ls
  N,000000,0,2,10,,c
  N,000000,0,3,10,,e
  N,000000,0,4,10,,e::15
  N,000000,0,5,10,,e::-12
Los marcadores de anotación ajustan automáticamente la posición de las etiquetas para que no se superpongan. El primer valor de chm es para el relleno de línea. Los siguientes valores son todos marcadores de anotación.
chm=B,C5D4B5BB,0,0,0
  AA,666666,0,3,15
  AB,666666,0,5,15
  AC,666666,0,24,15
  AD,666666,0,25,15
  AE,666666,0,26,15
  AF,666666,0,51,15
  AG,666666,0,60,15
  AH,666666,0,73,15
  AI,666666,0,80,15
  AJ,666666,0,99,15
Otro ejemplo de marcador de anotación que muestra la altitud de la ciudad en Suiza

Volver al principio