Gráficos radiales

   

En este documento, se describe cómo crear gráficos radiales con la API de gráficos.

Índice

Descripción general

En un gráfico radial, los datos se dibujan espaciados uniformemente, en sentido horario alrededor del gráfico. El valor del punto se representa como la distancia desde el centro del gráfico, donde el centro representa el valor mínimo y el borde del gráfico es el valor máximo. Cada serie se dibuja como un circuito completo del gráfico. El gráfico conecta estos puntos con líneas rectas o curvas, según lo especifiques. Por lo tanto, un gráfico radial es, en esencia, un gráfico de líneas encerrado en un círculo, en el que el eje Y va desde el centro del gráfico hasta el perímetro, y el eje X es el perímetro del gráfico, que comienza y termina en la línea de las 12:00.

Un gráfico se divide de manera uniforme en segmentos iguales. La cantidad de segmentos es el mayor de estos dos valores:

  • La cantidad de etiquetas + 1 (según lo especificado en chxl, si está presente) o
  • la cantidad de valores de datos.

Por ejemplo, si tienes un gráfico con ocho datos y sin etiquetas, estos tendrán una separación de 45 grados (360 / 8).

Si tienes varias series, se contará la que tenga más puntos. La cantidad mínima de segmentos es cuatro. Si tienes menos de cuatro etiquetas o datos, el gráfico se establecerá de forma predeterminada en cuatro segmentos. Necesitas n + 1 datos para crear un circuito completo del gráfico, en el que n es la cantidad de segmentos. Cuantos más datos haya, mayor será el nivel de detalle del gráfico. Tus datos nunca pasarán por el gráfico más de una vez.

Un gráfico radial puede admitir varias series. Cada serie es una línea del gráfico.

Descripción Ejemplo

 

En un gráfico de tipo r, los puntos se conectan con líneas rectas.

En este ejemplo, se muestra un gráfico radial simple con una sola serie de datos. Los valores aumentan gradualmente, lo que da una apariencia de caracol.

Gráfico radial
cht=r
chd=t:10,20,30,40,50,60,70,80,90

Cuando las etiquetas del eje X se incluyen en un gráfico radial, el espaciado de los datos alrededor del gráfico se determina por la cantidad de etiquetas o datos, lo que sea mayor. En ambos gráficos, la cantidad de datos es la misma (cinco), pero el primero tiene menos etiquetas y el segundo tiene más etiquetas. En el primer gráfico, se asignan las ubicaciones de los datos según la cantidad de datos, y en el segundo, según la cantidad de etiquetas. Observa que el segundo gráfico tiene seis segmentos, lo que da siete puntos para hacer un círculo completo.


chd=t:10,20,30,40,50
chxl=0:|1|2|3|4

Gráfico con 5 datos y 4 etiquetas.
Datos en intervalos de 360/5=72 grados



chd=t:10,20,30,40,50
chxl=0:|1|2|3|4|5|6

Gráfico con 6 etiquetas y 5 datos.
Datos en intervalos de 360/6=60 grados.

Puedes agregar más información y claridad a un gráfico radial si agregas colores, estilos de línea y etiquetas de ejes.

Este ejemplo es un gráfico radial más complejo con dos series de datos. El color de cada serie de datos se especifica con chco, como se describe en Colores de serie.

Los diseños de línea se especifican con chls, como se describe en Estilos de línea.

Las etiquetas de ejes se especifican con chxt, chxl y chxr, como se describe en Estilos y etiquetas de ejes. En el caso de los gráficos radiales, el eje X se dibuja en círculo alrededor del perímetro del gráfico, y los ejes Y y R van desde el centro del gráfico hasta la parte superior. Se ignora el eje t. Este gráfico incluye etiquetas del eje X que pueden indicar valores en distintas ubicaciones de las brújulas (por ejemplo, la velocidad del viento).

 

Gráfico radial
chco=FF0000,FF9900
chls=2.0,4.0,0.0|2.0,4.0,0.0
chxt=x
chxl=0:|0|45|90|135|180|225|270|315
chxr=0,0.0,360.0

En los gráficos de tipo rs, los puntos se conectan con líneas curvas.

En este ejemplo, se usan los mismos parámetros que en el ejemplo anterior, pero se especifica un relleno de línea para ambas series de datos.

Este ejemplo incluye las líneas de cuadrícula.

 

Gráfico radial con rellenos de líneas
chg=25.0,25.0,4.0,4.0
chm=
B,FF000080,0,1.0,5.0|
B,FF990080,1,1.0,5.0

En los gráficos radiales, los marcadores de línea horizontal se doblan en círculos y los marcadores de línea vertical se irradian hacia afuera desde el centro, como se muestra aquí.

  • chm=h,0000FF,...: Es el círculo azul oscuro. Observa cómo los marcadores de forma de línea horizontal generan un círculo en un gráfico radial.
  • chm=V,00FF0080,...: Es la línea verde a las 6:00.

Consulta Marcadores de formas para obtener más información sobre las formas disponibles.

Gráfico radial
chm=
h,0000FF,0,1.0,4.0
V,00FF00,0,4.0,5.0

Volver al principio

Tipos de gráficos (cht)

Hay dos tipos de gráficos radiales: gráficos de líneas rectas (cht=r) y gráficos de líneas curvos (cht=rs).

Parámetro Descripción Ejemplo
r

 

Para un gráfico de tipo r, los puntos se conectan con líneas rectas.

Gráfico radial
cht=r
chd=t:10,20,30,40,50,60

rs El tipo de gráfico rs conecta puntos con líneas curvas. Gráfico radial
cht=rs
chd=t:10,20,30,40,50,60,70,80,90

Volver al principio

Colores de la serie chco

De manera opcional, especifica los colores de las líneas con el parámetro chco.

Sintaxis

chco=<color_1>,...,<color_n>
<color>
Especifica uno o más colores de línea en formato hexadecimal RRGGBB separados por comas. Si hay más líneas que colores, las líneas adicionales pasarán por la lista de colores desde el 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

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

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

Estilos y etiquetas de ejes [Línea, barra, Google-o-meter, radar, dispersión]

Puedes especificar qué ejes se mostrarán en el gráfico y asignarles etiquetas y posiciones personalizadas, rangos y estilos.

No todos los gráficos muestran líneas de ejes de forma predeterminada. Puedes especificar exactamente qué ejes debe mostrar tu gráfico con el parámetro chxt. Las líneas de eje predeterminadas no muestran números; debes especificar un eje en el parámetro chxt para mostrar números.

Puedes elegir que tus ejes muestren números que reflejen los valores de los datos, o bien puedes especificar ejes personalizados. La opción predeterminada es mostrar valores numéricos, con valores ajustados para un rango de 0 a 100. Sin embargo, puedes cambiar ese rango con chxr para mostrar cualquier rango y aplicar diseño a los valores (por ejemplo, para mostrar símbolos de moneda o lugares decimales) con chxs.

Si eliges usar valores personalizados, como "Lun, Mar, Mié", puedes usar el parámetro chxl. Para colocar estas etiquetas en ubicaciones específicas a lo largo del eje, usa el parámetro chxp.

Por último, puedes usar los parámetros chxs y chxtc para especificar el color, el tamaño, la alineación y otras propiedades de las etiquetas del eje personalizado y numérico.

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.

En esta sección, se abordan los siguientes temas:


Ejes visibles chxt

Los gráficos de barras, de líneas, de radar y de dispersión muestran una o dos líneas de ejes de forma predeterminada, pero estas líneas no incluyen valores. Para mostrar valores en las líneas de los ejes o cambiar los ejes que se muestran, debes usar el parámetro chxt. De forma predeterminada, los valores de los ejes varían de 0 a 100, a menos que los escales de forma explícita con la propiedad chxr. Para ocultar todas las líneas de los ejes de un gráfico de líneas, especifica :nda después del valor del tipo de gráfico en el parámetro cht (por ejemplo: cht=lc:nda).

De forma predeterminada, en los ejes inferior y superior no se muestran las marcas según los valores, mientras que en los ejes izquierdo y derecho sí se muestran. Puedes cambiar este comportamiento con el parámetro chxs.

Sintaxis

chxt=
  <axis_1>
    ,...,
  <axis_n>
<axis>
Es un eje que se mostrará en el gráfico. Los ejes disponibles son los siguientes:
  • x: Eje x inferior
  • t: Eje x superior [No compatible con Google-o-Meter]
  • y: Eje Y izquierdo
  • r: Eje Y derecho [No compatible con Google-o-Meter]

Puedes especificar varios ejes del mismo tipo, por ejemplo: cht=x,x,y. Esto apilará dos conjuntos de ejes “x” en la parte inferior del gráfico. Esto es útil cuando se agregan etiquetas personalizadas a lo largo de un eje que muestra valores numéricos (consulta el siguiente ejemplo). Los ejes se dibujan de adentro hacia afuera, por lo que, si tienes x,x, la primera "x" hace referencia a la copia más interna, la siguiente "x" hace referencia a la siguiente copia externa, y así sucesivamente.

 

Ejemplos

Descripción Ejemplo

En este ejemplo, se muestra un gráfico de líneas con un eje X, un eje Y, un eje superior (t) y un eje derecho (r).

Debido a que no se especifican etiquetas, el gráfico predeterminado es un rango de 0 a 100 para todos los ejes.

Ten en cuenta que, de forma predeterminada, en los ejes inferior y superior no se muestran marcas junto a las etiquetas.

Gráfico de líneas con las etiquetas 0, 20, 40, 60, 80 y 100 a la izquierda y a la derecha, y etiquetas: 0, 25, 50, 75 y 100 arriba y abajo
chxt=x,y,r,t

Puedes incluir varios conjuntos de etiquetas para cada eje si incluyes el mismo valor más de una vez. En este ejemplo, se muestran dos conjuntos de ejes x y dos conjuntos de ejes y. Esto no es particularmente útil cuando se usan solo las etiquetas predeterminadas de los ejes, como se muestra aquí. Sin embargo, puedes especificar etiquetas personalizadas para cada copia de cada eje con el parámetro chxl.

<img <code="" dir="ltr" src="/static/chart/image/images/chart_41.png" title="chxt=x,x,y,y&cht=lc&chd=s:cEAELFJHHHKUju9uuXUc&chco=76A4FB&chls=2.0&chs=200xt,ych />"


<img <code="" dir="ltr" src="/static/chart/image/images/chart_42.png" title="chxt=x,x,y,y&cht=lc&chd=s:cEAELFJHHHKUju9uuXUc&chco=76A4FB&chls=2.0&chs=200x125&Chs=200x125&hl=es-419


En este ejemplo, se muestra un gráfico de barras horizontales con un eje X, un eje Y, un eje t superior y un eje r derecho.

Se omiten las etiquetas de ejes, por lo que la API de gráficos muestra un rango de 0 a 100 para el eje X y el eje t.

El rango del eje y y el eje r está determinado por la cantidad de barras. En este caso, hay cinco barras, por lo que la API de gráficos muestra un rango de 0 a 4. La primera etiqueta está centrada en la base de la primera barra, la segunda etiqueta está centrada en la base de la segunda barra y así sucesivamente.

Gráfico de líneas con las etiquetas 0, 20, 40, 60, 80 y 100 a la izquierda y a la derecha, y etiquetas: 0, 25, 50, 75 y 100 arriba y abajo
chxt=x,y,r,t

Puedes suprimir los ejes predeterminados en un gráfico de líneas si especificas :nda después del tipo de gráfico. Gráfico de líneas con ejes ocultos
cht=lc:nda

Volver al principio

Rango del eje chxr

Puedes especificar el rango de valores que aparecen en cada eje de forma independiente, mediante el parámetro chxr. Ten en cuenta que esto no cambia la escala de los elementos del gráfico, solo la escala de las etiquetas de los ejes. Si quieres que los números del eje describan los valores de datos reales, establece <start_val> y <end_val> en los valores inferiores y superiores del rango de formato de tus datos, respectivamente. Consulta Escalamiento de ejes para obtener más información.

Debes hacer que un eje sea visible mediante el parámetro chxt si deseas especificar su rango.

Para especificar los valores personalizados del eje, usa el parámetro chxl.

Sintaxis

Separa varios rangos de etiquetas de eje con el carácter de barra vertical ( |).

chxr=
  <axis_index>,<start_val>,<end_val>,<opt_step>
    |...|
  <axis_index>,<start_val>,<end_val>,<opt_step>
<axis_index>
A qué eje aplicar las etiquetas. Este es un índice basado en cero en el array de ejes especificado por chxt. Por ejemplo, el eje r sería 1 en chxt=x,r,y.
<start_val>
Es un número que define el valor bajo de este eje.
<end_val>
Es un número que define el valor alto de este eje.
<opt_step>
[Opcional] El paso de recuento entre las marcas del eje. No hay un valor de paso predeterminado; el paso se calcula para intentar mostrar un conjunto de etiquetas con un espaciado correcto.

 

Ejemplos

Descripción Ejemplo

En este ejemplo, se muestran los ejes Y de izquierda y derecha (y y r) y un eje X (x).

Cada eje tiene un rango definido. Debido a que no se especifican etiquetas ni posiciones, los valores se toman del rango dado y se separan de manera uniforme dentro de ese rango. En el gráfico de líneas, los valores se distribuyen de manera uniforme a lo largo del eje x.

La dirección del eje se invierte para el eje r (índice 2), ya que el primer valor (1000) es mayor que el último valor (0).


chxt=x,y,r
chxr=
  0,0,500|
  1,0,200|
  2,1000,0

En este ejemplo, se especifican valores para el eje x.

Las etiquetas de los ejes están espaciadas uniformemente a lo largo del eje. Se especifica un valor de cinco (5) para el parámetro <opt_step>.

Gráfico de barras con 200, 300 y 400 en el eje X chxt=x
chxr=0,10,50,5

Volver al principio

Etiquetas de eje personalizadas chxl

Puedes especificar etiquetas personalizadas de ejes de strings en cualquier eje mediante el parámetro chxl. Puedes especificar tantas etiquetas como quieras. Si muestras un eje (con el parámetro chxt) y no especificas etiquetas personalizadas, se aplicarán las etiquetas numéricas estándar. Para especificar un rango numérico personalizado, usa el parámetro chxr en su lugar.

Si deseas establecer ubicaciones específicas a lo largo del eje de tus etiquetas, usa el parámetro chxp.

Sintaxis

Especifica un conjunto de parámetros para cada eje que desees etiquetar. Separa varios conjuntos de etiquetas con el carácter de barra vertical (|).

chxl=
  <axis_index>:|<label_1>|...|<label_n>
    |...|
  <axis_index>:|<label_1>|...|<label_n>
<axis_index>
A qué eje aplicar las etiquetas. Este es un índice en el array del parámetro chxt. Por ejemplo, si tienes chxt=x,x,y,y, el índice 0 sería el primer eje X y 1 sería el segundo.
<label_1>| ... |<label_n>
Una o más etiquetas para colocar a lo largo de este eje. Pueden ser valores numéricos o de string. No es necesario que las strings estén entre comillas. label_1 se muestra en la posición más baja del eje y label_n se muestra en la posición más alta. Las etiquetas adicionales están separadas de manera uniforme entre ellas. Indica los espacios con un signo +. No hay forma de especificar un salto de línea en una etiqueta. Separa las etiquetas con un carácter de barra vertical. Nota: No coloques una canalización después de la etiqueta final en el parámetro chxl.

 

Ejemplos

Descripción Ejemplo

En este gráfico, se muestra cómo agregar etiquetas personalizadas a dos ejes. Observa cómo los valores están espaciados de manera uniforme y cómo el último valor chxl no termina con una canalización.

Gráfico de líneas con 0 y 100 a la izquierda; A, B y C a la derecha; ene, julio, enero, julio y enero en el eje X; 2005, 2006 y 2007 debajo
chxt=x,y
chxl=
0:|Jan|Feb|March|April|May|
1:|Min|Mid|Max

En este ejemplo, se incluyen las etiquetas de los ejes en los ejes Y izquierdo y derecho (y y r). También incluye dos conjuntos de valores para el eje X (x). Podrías considerar agregar marcas de verificación en el eje Y mediante chxs.

Gráfico de líneas con 0 y 100 a la izquierda; A, B y C a la derecha; ene, julio, enero, julio y enero en el eje X; 2005, 2006 y 2007 debajo
chxt=x,y,r,x
chxl=
0:|Jan|July|Jan|July|Jan|
1:|0|50|100|
2:|A|B|C|
3:|2005|2006|2007

En este ejemplo, se incluyen las etiquetas de los ejes en los ejes y izquierdo y derecho (y y r). También se incluyen dos conjuntos de valores para el eje X (x). Observa las etiquetas vacías del conjunto de ejes X inferior, que se usan para separar los valores.

En este ejemplo, se usan valores predeterminados para las etiquetas de los ejes del eje Y izquierdo.

Gráfico de barras con 0 y 100 a la izquierda; A, B y C a la derecha; ene, julio, ene, julio y enero en el eje x; 2005, 2006 y 2007 debajo
chxt=x,y,r,x
chxl=
0:|Jan|July|Jan|July|Jan|
2:|A|B|C|
3:|2005||2006||2007

Si deseas agregar una etiqueta genérica para describir un eje completo (por ejemplo, para etiquetar un eje como "costo" y otro "alumno"), usa la propiedad chxt a fin de agregar un eje adicional en cada lado. Luego, usa chxl para agregar una sola etiqueta personalizada a cada lado y chxp para espaciarla en el medio del eje.


chxt=x,x,y,y
chxl=1:|Martinis|3:|Score
chxp=1,50|3,50

Volver al principio

Posiciones de la etiqueta de eje chxp

Puedes especificar qué etiquetas de los ejes mostrar, ya sea mediante las etiquetas predeterminadas o las personalizadas especificadas con chxl. Si no especificas posiciones exactas con este parámetro, las etiquetas se espaciarán de manera uniforme y se establecerán en un valor de paso predeterminado a lo largo de los ejes. Si no especificas chxl, las etiquetas de marcas serán los valores predeterminados (por lo general, los valores de datos o los números de barra en los gráficos de barras).

Sintaxis

Separa varios conjuntos de posicionamiento con el carácter de barra vertical (|).

chxp=
  <axis_1_index>,<label_1_position>,...,<label_n_position>
    |...|
  <axis_m_index>,<label_1_position>,...,<label_n_position>
<axis_index>
Eje para el que especificas posiciones. Este es un índice en el array del parámetro chxt. Por ejemplo, si tienes chxt=x,x,y,y, el índice 0 sería el primer eje X, 1 sería el segundo eje X, y así sucesivamente.
<label_1_position>,...,<label_n_position>
: Es la posición de la etiqueta junto al eje. Esta es una lista de valores numéricos separados por comas, en la que cada valor establece la posición de la etiqueta correspondiente en el array chxl: la primera entrada se aplica a la primera etiqueta, y así sucesivamente. La posición es un valor en el rango para ese eje. Ten en cuenta que siempre será de 0 a 100, a menos que hayas especificado un rango personalizado con chxr. Debes tener tantas posiciones como etiquetas para ese eje.

 

Ejemplos

Descripción Ejemplo

En este ejemplo, se incluyen etiquetas del eje R en posiciones especificadas del gráfico. El texto de la etiqueta se especifica con el parámetro chxl.

Las etiquetas con una posición especificada de 0 se colocan en la parte inferior de los ejes "y" o "r", o bien a la izquierda de los ejes "x" o "t".

Las etiquetas con una posición especificada de 100 se colocan en la parte superior del eje y o el r, o a la derecha de los ejes x o t.

Line chart with min, average, and max on the right, 20, 40, 60, 80, and 100 on the left, and 0, 25, 50, 75, and 100 along the x-axis
chxt=x,y,r
chxl=2:|min|average|max
chxp=2,10,35,75

En este ejemplo, se muestra cómo mostrar los valores predeterminados de las etiquetas, pero solo en ubicaciones especificadas.

chxp=1,10,35,75: El eje Y debe mostrar solo tres etiquetas: 10, 35 y 75. Debido a que no se especifica ningún texto de etiqueta personalizada, se muestran estos valores de los ejes. Observa que no tienes que espaciar las etiquetas de manera uniforme cuando usas chxp. Si no se especificara chxp aquí, la distancia predeterminada del valor de la etiqueta en el eje y sería cada 20 unidades, como se muestra en el segundo gráfico.

Line chart with 10, 35, and 75 on the left, and 0, 25, 50, 75, and 100 along the x-axis
chxt=x,y
chxp=1,10,35,75

Gráfico de líneas con posiciones predeterminadas de los ejes.
chxt=x,y
chxp sin especificar

Volver al principio

Estilos de etiquetas de eje chxs

Puedes especificar el tamaño de la fuente, el color y la alineación para las etiquetas de ejes, tanto para las etiquetas personalizadas como los valores predeterminados. Todas las etiquetas del mismo eje tienen el mismo formato. Si tienes varias copias de un eje, puedes formatear cada una de manera diferente. También puedes especificar el formato de una string de etiqueta, por ejemplo, para mostrar símbolos de moneda o ceros finales.

De forma predeterminada, en los ejes inferior y superior, no se muestran marcas junto a los valores, mientras que en los ejes izquierdo y derecho sí se muestran.

Sintaxis

Los valores de varios ejes deben separarse con un carácter de barra vertical (|).

chxs=
 <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color>
   |...|
 <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color>
<axis_index>
Eje al que se aplica esto. Este es un índice basado en cero en el parámetro chxt.
<opt_format_string>
[Opcional] Esta es una string de formato opcional que, si se usa, sigue inmediatamente después del número de índice del eje sin una coma intermedia. Comienza con una letra N literal seguida de los siguientes valores, todos opcionales: La sintaxis de la string de formato es la siguiente:
       N<preceding_text>*<number_type><decimal_places>zs<x or y>*<following_text>
Este es el significado de cada elemento:
  • <preceding_text>: Es el texto literal 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 literal que sigue a cada valor.
<opt_label_color>
Es el color que se aplicará al texto del eje (pero no a la línea del eje), en formato hexadecimal RRGGBB. El color de las líneas del eje se especifica por separado con opt_axis_color. El color predeterminado es gris.
<opt_font_size>
(Opcional) especifica el tamaño de la fuente en píxeles. Este parámetro es opcional.
<opt_alignment>
[Opcional] Alineación de etiquetas. En el caso de los ejes superior o inferior, de esta forma se describe cómo se alinea la etiqueta con la marca de verificación que está encima o debajo de ella. En el caso de los ejes izquierdo o derecho, se describe cómo se alinea dentro de su cuadro delimitador, que toca el eje. Especifica uno de los siguientes números:
  • -1: Parte superior o inferior: Las etiquetas están a la derecha de las marcas. Izquierda o derecha: Las etiquetas están alineadas a la izquierda en su área. Predeterminado para etiquetas del eje R.
  • 0: Parte superior o inferior: Las etiquetas están centradas en las marcas. Izquierda o derecha: Las etiquetas están centradas en su área. Predeterminado para etiquetas de los ejes x y t.
  • 1: Parte superior o inferior: Las etiquetas están a la izquierda de las marcas; Izquierda o derecha: Las etiquetas están alineadas a la derecha en su área. Predeterminado para etiquetas del eje y.
<opt_axis_or_tick>
[Opcional; no se admite en Google-o-meter] Indica si se deben mostrar las marcas o las líneas de los ejes para este eje. Las marcas y las líneas de los ejes solo están disponibles para los ejes más internos (por ejemplo, no son compatibles con el exterior de dos ejes x). Usa uno de los siguientes valores:
  • l (mayúscula “L” en minúscula): Dibuja solo la línea del eje.
  • t: Solo dibuja marcas. Las comillas simples son las pequeñas líneas junto a las etiquetas de los ejes.
  • lt: [Predeterminado] Dibuja una línea de eje y marcas de verificación para todas las etiquetas.
  • _: (guion bajo): No se dibuja la línea del eje ni las comillas simples. Si quieres ocultar una línea de eje, usa este valor.
<tick_color>
[Opcional; no se admite en Google-o-meter] El color de la marca de verificación, en formato hexadecimal RRGGBB. El color predeterminado es gris.
<opt_axis_color>
(opcional): Es el color de la línea del eje en formato hexadecimal RRGGBB. El color predeterminado es gris.

 

Ejemplos

Descripción Ejemplo

El tamaño y el color de la fuente se especifican para el segundo eje X (ene, feb, mar).

Gráfico de líneas con mínimo, promedio y máximo a la izquierda; 0, 1, 2, 3 y 4 a la derecha; de 0 a 100 en el eje X y ene, feb y mar en azul debajo

chxt=x,y,r,x
chxr=2,0,4
chxl=3:|Jan|Feb|Mar|
     1:|min|average|max
chxp=1,10,35,75
chxs=3,0000DD,13,0,t

El tamaño, el color y la alineación de la fuente se especifican para el eje Y derecho. Se dibujan marcas de verificación, pero no líneas de ejes.

Gráfico de líneas con números de 0 a 100 en el eje X; ene, febrero, mar debajo; 0 a 4 en el eje Y, y marcas rojas con texto azul para mín., promedio y máx. a la derecha.

chxt=x,y,r,x
chxl=3:|Jan|Feb|Mar|
     2:|min|average|max
chxp=2,10,35,95
chxs=2,0000DD,13,-1,t,FF0000

En este gráfico, se incluyen tres conjuntos de datos y se muestran tres conjuntos de etiquetas de ejes, uno por serie. Cada conjunto de etiquetas se formatea con una string de formato personalizado, como se describe a continuación:

  • 0N*e,000000|
    • 0 significa que la primera serie de datos
    • N significa una string de formato.
    • * significa el inicio de los especificadores de formato.
    • e significa notación científica
    • * significa el final de los especificadores de formato.
    • 000000 significa texto negro.
  • 1N*cUSD*Mil,FF0000|
    • 1 significa que la segunda serie
    • N significa una string de formato.
    • * significa el inicio de los especificadores de formato.
    • c significa un marcador de moneda.
    • USD especifica el dólar estadounidense como el marcador de moneda que se usará.
    • * significa el final de los especificadores de formato.
    • Mil es un literal que sigue a la string.
    • FF0000 significa texto rojo.
  • 2N*sz2*,0000FF
    • 2 significa que la tercera serie
    • N significa una string de formato.
    • * significa el inicio de los especificadores de formato.
    • s significa mostrar los especificadores de agrupación (en la configuración regional en inglés de EE.UU., es una coma cada tres ceros).
    • z2 significa mostrar dos ceros finales.
    • 0000FF significa texto azul.

Los rangos de etiquetas del eje se configuran con el parámetro chxr (axis_index, start, end, step). Si no se hubiera establecido, habrían sido 0-100 de forma predeterminada.


chd=s:
  984sttvuvkQIBLKNCAIi,
  DEJPgq0uov17zwopQODS,
  AFLPTXaflptx159gsDrn
chxr=
  0,0,1000000,250000|
  1,0,60|
  2,0,5000
chxs=
  0N*e,000000|
  1N*cUSD*Mil,FF0000|
  2N*sz2*,0000FF

Volver al principio

Estilos de marcas de verificación de eje chxtc

Puedes especificar comillas largas para ejes específicos. Por lo general, se usa para extender una marca de verificación a lo largo de un gráfico. Usa el parámetro chxs para cambiar el color de la marca de verificación.

Los valores de varios ejes deben separarse con un carácter de barra vertical (|). Los valores dentro de una serie deben separarse con una coma.

Sintaxis

chxtc=
  <axis_index_1>,<tick_length_1>,...,<tick_length_n>
    |...|
  <axis_index_m>,<tick_length_1>,...,<tick_length_n>
<axis_index>
Eje al que se aplica esto. Este es un índice basado en cero en el parámetro chxt. Separa los valores para diferentes ejes con un delimitador de barras.
<tick_length_1>,...,<tick_length_n>
La longitud de las marcas de ese eje en píxeles. Si se proporciona un solo valor, se aplicará a todos los valores; si se especifica más de un valor, las marcas de los ejes recorrerán la lista de valores para ese eje. Los valores positivos se dibujan fuera del área del gráfico y se recortan según los bordes del gráfico. El valor positivo máximo es 25. Los valores negativos se dibujan dentro del área del gráfico y se recortan según los bordes del área del gráfico.

 

Ejemplos

Descripción Ejemplo

Ejemplo del uso de chxtc para crear marcas rojas largas Aquí, la longitud de la marca de verificación supera el ancho del área del gráfico, pero se recorta para adaptarse al gráfico.

  • chxt=x,y,r,x: Muestra un eje izquierdo, un eje derecho y dos ejes inferiores.
  • chxl=2:|min|average|max|3:|Jan|Feb|Mar: Es el texto de la etiqueta asignado a la "r" (lado derecho) y los ejes externos.
  • chxp=2,10,35,95: Las posiciones de las etiquetas personalizadas a lo largo del eje R (índice=2) para las tres etiquetas.
  • chxs=2,0000dd,13,-1,t,FF0000: Estilos de etiquetas de ejes para el eje r: color de texto, tamaño del texto, alineado a la izquierda y con marcas rojas.
  • chxtc=1,10|2,-180: longitudes de marcas de los ejes para los ejes y y r. El primer valor especifica marcas de 10 píxeles de longitud, fuera del eje. El segundo valor especifica marcas de 180 píxeles dentro del eje; el número negativo significa que la marca va dentro del eje y se recorta para adaptarse al gráfico.

Gráfico de líneas con números del 0 al 100 en el eje X, ene, febrero y mar debajo, del 0 al 4 en el eje y y marcas rojas largas con texto azul para mín., promedio y máximo a la derecha.

chxt=x,y,r,x
chxl=
  2:|min|average|max|
  3:|Jan|Feb|Mar
chxp=2,10,35,95
chxs=
  2,0000dd,13,-1,t,FF0000
chxtc=1,10|2,-180

En este gráfico, se muestran las longitudes de marcas alternas. chxtc especifica dos valores de longitud de marca para el eje y (5 y 15), y las marcas dibujadas en el gráfico alternan entre los dos valores.
chxt=x,y
chxtc=
  1,5,15

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

Rellenos de gradientes chf [Línea, barra, Google-o-meter, radar, dispersión,Venn]

Puedes aplicar uno o más rellenos de gradientes a áreas o fondos del gráfico. Los rellenos gradientes son atenuaciones de un color a otro. (Gráficos circulares y de Google-O-Meter: solo en segundo plano).

Cada relleno de gradiente especifica un ángulo y, luego, dos o más colores anclados a una ubicación específica. El color varía a medida que se mueve de un ancla a otro. Debes tener al menos dos colores con valores <color_centerpoint> diferentes para que uno pueda aparecer en el otro. Cada gradiente adicional se especifica mediante un par <color>,<color_centerpoint>.

Sintaxis

chf=<fill_type>,lg,<angle>,<color_1>,<color_centerpoint_1>
    ,...,
  <color_n>,<color_centerpoint_n>
<fill_type>.
El área del gráfico que se debe completar. Uno de los siguientes:
  • bg: Relleno de fondo
  • c: Relleno del área del gráfico.
  • b<index>: Relleno de gradiente de barras (solo gráficos de barras). Reemplaza <index> por el índice de la serie de las barras para rellenar con un gradiente. Consulta Colores de serie de gráficos de barras para ver un ejemplo.
lg
Especifica un relleno de gradientes.
<ángulo>
Es un número que especifica el ángulo del gradiente de 0 (horizontal) a 90 (vertical).
<color>
Es el color del relleno, en formato hexadecimal RRGGBB.
<color_centerpoint>
Especifica el punto de anclaje del color. El color comenzará a desvanecerse a partir de este punto a medida que se acerque a otro anclaje. El rango de valores va de 0.0 (borde inferior o izquierdo) a 1.0 (borde superior o derecho), inclinado en el ángulo especificado por <angle>.

 

Ejemplos

Descripción Ejemplo

El área del gráfico tiene un gradiente lineal horizontal, especificado con un ángulo de cero grados (0).

Los colores son el durazno (FFE7C6), centrados en el lado izquierdo (posición 0.0) y azul (76A4FB) centrados en el lado derecho (posición 1.0).

El fondo del gráfico está dibujado en gris (EFEFEF).

Gráfico de líneas gris oscuro con fondo gris pálido y área del gráfico en un gradiente lineal de blanco a azul de izquierda a derecha

chf=
  c,lg,0,
  FFE7C6,0,
(durazno)
  76A4FB,1
(azul)

El área del gráfico tiene un gradiente lineal diagonal (de la parte inferior izquierda a la parte superior derecha), especificado con un ángulo de cuarenta y cinco grados (45).

El durazno (FFE7C6) es el primer color especificado. La parte inferior izquierda del gráfico es de color durazno puro.

El segundo color especificado es el azul (6A4FB). La parte superior derecha del gráfico es de color azul puro. Observa cómo especificamos un desplazamiento de 0.75 para proporcionar un pico de azul que se desvanece hacia la esquina superior derecha.

El fondo del gráfico está dibujado en gris (EFEFEF).

Gráfico de líneas gris oscuro con fondo gris pálido y área del gráfico en un gradiente lineal diagonal de blanco a azul desde la esquina inferior izquierda hasta la parte superior derecha

chf=
  c,lg,45,
  FFE7C6,0,
(durazno)
  76A4FB,0.75
(azul)

El área del gráfico tiene un gradiente lineal vertical (de arriba abajo), especificado con un ángulo de noventa grados (90).

El primer color especificado es el azul (76A4FB). La parte superior del gráfico es de color azul puro.

El durazno (FFE7C6) es el segundo color especificado. La parte inferior del gráfico es de color durazno puro.

El fondo del gráfico está dibujado en gris (EFEFEF).

Gráfico de líneas gris oscuro con fondo gris pálido y área del gráfico en un gradiente lineal vertical de blanco a azul desde abajo hacia arriba

chf=
  c,lg,90,
  FFE7C6,0,
(durazno)
  76A4FB,0.5
(azul)

Volver al principio

 

Relleno rayado chf [Line, Bar, Google-o-meter, Radar, Scatter, Venn]

Puedes especificar un relleno de fondo a rayas para el área del gráfico o para todo el gráfico. (Gráficos circulares y de Google O-Meter: solo fondo)

Sintaxis

chf=
  <fill_type>,ls,<angle>,<color_1>,<width_1>
    ,...,
  <color_n>,<width_n>
<fill_type>.
El área del gráfico que se debe completar. Uno de los siguientes:
  • bg: Relleno de fondo
  • c: Relleno de área del gráfico
  • b<index>: Rellenos a rayas de barras (solo gráficos de barras). Reemplaza <index> por el índice de serie de las barras para rellenar con rayas. Consulta Colores de serie de gráficos de barras para ver un ejemplo.
ls
Especifica el relleno de la franja lineal.
<ángulo>
El ángulo de todas las rayas, en relación con el eje Y. Usa 0 para rayas verticales o 90 para rayas horizontales.
<color>
Es el color de esta franja, en formato hexadecimal RRGGBB. Repite <color> y <width> para cada franja adicional. Debes tener al menos dos franjas. Las rayas se alternan hasta que se completa el gráfico.
<width>
El ancho de esta franja, desde 0 hasta 1, donde 1 es el ancho completo del gráfico. Las rayas se repiten hasta que se completa el gráfico. Repite los valores <color> y <width> para cada franja adicional. Debes tener al menos dos franjas. Las rayas se alternan hasta que se completa el gráfico.

 

Ejemplos

Descripción Ejemplo
  • bg,ls,0: Se completa el relleno de rayas en el fondo con rayas en un ángulo de cero grados respecto del eje Y (paralelo al eje Y). Las rayas cubren el fondo y el área de trazado.
  • CCCCCC,0.15: La primera franja es gris oscuro, es un 15% tan ancha como el gráfico.
  • FFFFFF,0.1: La segunda franja es blanca, un 10% más ancha que el gráfico.
Gráfico de líneas azul con rayas grises y blancas alternas de izquierda a derecha
chf=
  bg,ls,0,
  CCCCCC,0.15,
  FFFFFF,0.1
  • c,ls,90: Área del gráfico con rayas horizontales en un ángulo de noventa grados respecto del eje Y. Las rayas cubren el área del trazado, pero se omite el fondo del gráfico.
  • 999999,0.25: La primera franja es gris oscuro, es un 25% tan ancha como el gráfico.
  • CCCCCC,0.25: Igual que la primera franja, pero de un gris más claro.
  • FFFFFF,0.25: Igual que la primera franja, pero blanco.
Gráfico de líneas azul con rayas grises oscuras, gris pálido, blancas y grises oscuras de abajo hacia arriba
chf=
  c,ls,90,
  999999,0.25,
  CCCCCC,0.25,
  FFFFFF,0.25

Volver al principio

Líneas de cuadrícula chg [Líneas, barras, radar y dispersión]

Puedes especificar líneas de cuadrícula sólidas o punteadas en el gráfico con el parámetro chg.

Este parámetro no te permite especificar el grosor ni el color de las líneas. Si deseas conocer más formas de crear líneas en el gráfico, consulta los marcadores de forma (chm tipo h, H, v o V), marcadores de rango (chm) y marcas de eje (chxtc).

Sintaxis

chg=
  <x_axis_step_size>,<y_axis_step_size>,<opt_dash_length>,<opt_space_length>,<opt_x_offset>,<opt_y_offset>
<x_axis_step_size>, <y_axis_step_size>
Se usa para calcular cuántas líneas de cuadrícula X o y se mostrarán en el gráfico. 100 / step_size = cantidad de líneas de la cuadrícula en el gráfico. Por lo tanto, 20,25 significaría 5 líneas de cuadrícula verticales y 4 líneas de cuadrícula horizontales.
<opt_dash_length>, <opt_space_length>
(Opcional): Se usa para definir líneas de cuadrícula punteadas. El primer parámetro es la longitud de cada guion de línea, en píxeles. El segundo parámetro es el espacio entre los guiones, en píxeles. Especifica 0 en <opt_space_length> para una línea continua. Los valores predeterminados son 4,1.
<opt_x_offset>,<opt_y_offset>
[Opcional] Cantidad de unidades, según la escala del gráfico, que se desplazan por las líneas de la cuadrícula "x" e "y", respectivamente. Pueden ser valores positivos o negativos. Si especificas este valor, también debes especificar todos los valores anteriores. Los valores predeterminados son 0,0.

 

Ejemplos

Descripción Ejemplo

En estos ejemplos, solo se usan los parámetros <x_axis_step_size> y <y_axis_step_size>. La API de Chart muestra una línea de cuadrícula punteada de forma predeterminada.

Gráfico de líneas con 5 líneas verticales y dos líneas horizontales discontinuas en gris pálido
chg=20,50
Gráfico de líneas con 5 líneas verticales y dos líneas horizontales discontinuas en gris pálido
chg=20,50

En este ejemplo, se usan espacios más grandes para mostrar líneas de cuadrícula más claras (1,5).

Gráfico de líneas con 5 líneas verticales y dos horizontales tenue, gris pálido, y cuadrícula discontinua
chg=20,50,1,5

A fin de mostrar las líneas de cuadrícula sólidas, especifica cero (0) para el parámetro <opt_space_length>.

Este gráfico también especifica un desplazamiento del eje X de 10.

Gráfico de líneas con 5 líneas verticales y dos horizontales gris pálido y de cuadrícula continua
chg=20,50,1,0,10

En este gráfico, se muestra un desplazamiento del eje X de 10 y un desplazamiento del eje y de 20.

Gráfico de líneas con 5 líneas verticales y dos horizontales gris pálido y de cuadrícula continua
chg=20,50,3,3,10,20

Volver al principio

Estilos de línea chls [Línea, radar]

Puedes especificar el grosor de la línea y el estilo sólido o discontinuo con el parámetro chls. Este parámetro solo se puede usar para diseñar líneas en gráficos radiales o de líneas; no puedes usarlo para diseñar la línea en un gráfico compuesto, a menos que el tipo de base sea un gráfico de líneas.

Sintaxis

Separa varios diseños de línea con el carácter de barra vertical ( |). El primer diseño se aplica a la primera línea, el segundo a la siguiente, y así sucesivamente. Si tienes menos diseños que líneas, el diseño predeterminado se aplica a todas las líneas no especificadas.

chls=
  <line_1_thickness>,<opt_dash_length>,<opt_space_length>
    |...|
  <line_n_thickness>,<opt_dash_length>,<opt_space_length>
<line_1_thickness>
Espesor de la línea en píxeles.
<opt_dash_length>, <opt_space_length>
(Opcional): Se usa para definir líneas de cuadrícula punteadas. El primer parámetro es la longitud de cada guion de línea, en píxeles. El segundo parámetro es el espacio entre los guiones, en píxeles. En el caso de las líneas continuas, no especifiques ningún valor. Si solo especificas <opt_dash_length>, <opt_space_length> se establecerá en <opt_dash_length>. El valor predeterminado es 1,0 (una línea continua).

 

Ejemplos

Descripción Ejemplo

Aquí, la línea punteada se especifica mediante 3,6,3 y la línea continua más gruesa se especifica con 5.

Gráfico de líneas con una línea continua y una línea punteada
chls=3,6,3|5

Volver al principio

Marcadores de íconos dinámicos chem [Barra, línea, radar, dispersión]

Crea tu gráfico y especifica uno o más íconos dinámicos como valores químicos. La sintaxis de chem es la siguiente. Todos los elementos delimitados por punto y coma en púrpura son opcionales y cualquiera se puede omitir por completo en la URL. Si quieres incluir varios marcadores, incluye varias strings de sintaxis delimitadas por un carácter |. Puedes obtener más información sobre los íconos dinámicos en la página de íconos dinámicos.

También puede incorporar un gráfico dentro de otro gráfico como ícono dinámico. Consulta la subsección Gráficos incorporados a continuación.

chem=
  y;s=<icon_string_constant>;d=<marker_data_string>;ds=<which_series>;dp=<which_points>;py=<opt_z_order>;po=<x,y>;of=<x_offset,y_offset>
|...| y;s=<icon_string_constant>;d=<marker_data_string>;ds=<which_series>;dp=<which_points>;py=<opt_z_order>;po=<x,y>;of=<x_offset,y_offset>
s=<icon_string_constant>
Es una constante de marcador de cadena para un ícono dinámico de la página del ícono dinámico. Esta constante es casi la misma que el parámetro chst para íconos independientes. Sin embargo, cuando la string de ícono independiente comienza con "d_", debes quitar ese prefijo para obtener el marcador de ícono dinámico equivalente. Ejemplo: ícono independiente: d_bubble_icon_text_small; marcador de ícono dinámico equivalente: bubble_icon_text_small.
d=<marker_data_string>
Son los datos requeridos para este tipo de marcador en particular. Contiene la misma string que se usaría en un parámetro chld para un ícono independiente equivalente, con la excepción de que todos los delimitadores | se deben reemplazar por comas (recuerda usar comas en lugar de marcadores de barra vertical para el texto de varias líneas). Ten en cuenta que, dentro de la string de datos, también debes escapar los siguientes caracteres con una marca @: barra vertical ( | ), en ( @ ), es igual a ( = ), coma ( , ), punto y coma ( ; ). Ejemplos: hello@,+world, 5@@10+cents+each.
ds=<which_series>
[Opcional] Es el índice basado en cero de la serie de datos a la que pertenece este marcador. El valor predeterminado es 0.
dp=<which_points>
[Opcional] Especifica qué datos se usan para dibujar marcadores. El valor predeterminado es 0 (primer punto de la serie). Usa uno de los siguientes formatos:
  • 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 los puntos 3 y 4.
  • range,<start>,<end>,<step>: Dibuja un marcador en cada dato de paso dentro de un rango desde inicio hasta final, inclusive. El inicio y el final son valores de índice y pueden ser números de punto flotante para indicar valores intermedios. Todos los valores son opcionales. Los valores predeterminados son: start=0, end=last item, step=1. Si omites un valor, debes incluir las comas intermedias, pero no es necesario que incluyas comas finales vacías. Ejemplos: dp=range,0,4 dibuja un marcador en los elementos 0 a 4; dp=range,5,10,2 dibuja un marcador en los elementos 5, 7 y 9; dp=range,2 dibuja puntos en el tercer punto y en los posteriores; dp=range,3,,1.5 dibuja marcadores en cada 1.5 datos, desde el cuarto elemento hasta el último.
  • all: Dibuja un marcador en cada elemento. Esto equivale a range,0,end_index. Ejemplo: dp=all
  • every,n: Dibuja un marcador en cada enésimo marcador. Ejemplo: dp=every,2 dibuja un marcador en los elementos 0, 2 y 4.
py=<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) están justo debajo de 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).
po=<x,y>
[Opcional] Es una posición absoluta en el gráfico en la que se dibuja el marcador. "x" e "y" son dos números de punto flotante, donde 0.0,0.0 es la esquina inferior izquierda y 1.0,1.0 es la esquina superior derecha.
of=<x_offset,y_offset>
[Opcional] Es una cantidad de píxeles para desplazar el ícono de su posición normal. x_offset y y_offset son números enteros positivos o negativos. Es importante especificar este valor en un ícono dinámico incorporado, ya que el marcador se centrará de forma vertical y horizontal sobre el punto, por lo que es probable que este no se alinee con el marcador de datos. Un buen desplazamiento para un marcador vertical es of=0,22. Un buen desplazamiento para un marcador inclinado es of=-12,20 o of=12,20, según la dirección de la inclinación, pero es posible que debas experimentar. El valor predeterminado es 0,0.

 

Ejemplos

Descripción Ejemplo
A continuación, se muestran ejemplos del mismo ícono dinámico creado como imagen independiente y usado como marcador en un gráfico de líneas.

Gráfico 1: https://chart.googleapis.com/chart?chs=300x140&cht=lc&chco=FF9900,224499&
chd=t:75,74,66,30,10,5,3,1&chls=1|1&
chem=y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=2;ds=0&chm=v,ccccFF,0,::.2,2

Gráfico 2: https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000

Gráfico de líneas con marcador de ícono dinámico
chem=
  y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=2;ds=0


Tiene el mismo marcador de ícono dinámico que la imagen independiente.


chst=
  d_bubble_icon_text_small
chld=
  ski|bb|Wheeee!|FFFFFF|000000

Ten en cuenta que el marcador de un ícono dinámico se centrará en el punto de forma horizontal y vertical. Por lo tanto, si usas un ícono dinámico con una cola, la cola no estará en el punto del gráfico, sino el centro del marcador. El primer gráfico centra la marca en el punto de datos 3, que en realidad coloca la cola un poco a la derecha de la marca en la línea.

En el segundo gráfico, se usa el valor of para mover la cola del marcador sobre el dato deseado. Un buen desplazamiento para un pin inclinado es de -12,20.


chem=y;
  s=map_xpin_letter;
  d=pin_sleft,A,FF0000;
  dp=3;
  ds=1



chem=y;
  s=map_xpin_letter;
  d=pin_sleft,A,FF0000;
  dp=3;
  ds=1;
  of=-12,0

Para incluir varios íconos dinámicos, repite la string de sintaxis, delimitada por un carácter |.

En este ejemplo, se muestra un rango, así como dos marcadores individuales.

Observa cómo los pines verticales están desplazados en 0,22, y el marcador inclinado tiene un desplazamiento de 12,20 para que los puntos del pin se alineen con la serie que describen.


chem=
  y;s=map_xpin_letter;d=pin_sright,A,FF0000;dp=4;ds=0;py=1;of=12,20|
  y;s=map_pin_icon;d=baby,FF5555;ds=1;dp=6;of=0,22|
  y;s=map_pin_icon;d=camping,DEF763;ds=2;dp=range,2,5
Esto muestra un marcador de texto de varias líneas. Después de agregar el texto, se debe desplazar el marcador, ya que la burbuja cambia de tamaño para adaptarse al texto y se vuelve a centrar en el gráfico. Observa cómo los saltos de línea en el texto se indican con comas en la string de datos d.
chem=y;
  s=bubble_texts_big;
  d=bbbr,FFC6A5,000000,Outlier,Forgot+to+feed;
  ds=0;
  dp=13;
  of=-120,2

Gráficos incorporados

Puedes incorporar un gráfico dentro de otro usando la sintaxis de íconos dinámicos.

Existen dos estilos de marcadores de gráficos incorporados: gráficos incorporados en una burbuja y gráficos incorporados sin burbuja. Estos son ejemplos de ambos:

Gráfico sin burbujas
Gráfico con burbuja
Gráfico sin cuadro

A continuación, se indican los detalles de los parámetros s=<icon_string_constant>;d=<marker_data_string>, tanto para los gráficos sin burbujas como para los gráficos incorporados en burbujas (los parámetros mencionados anteriormente no se describen aquí):

Sintaxis

Non-bubble:
  chem=y;s=ec;d=<alignment_string>,<chart_data>;ds=<which_series>;dp=<which_points>;py=<z_order>;po=<x,y>;of=<x_offset,y_offset>

Bubble:
  chem=y;s=ecb;d=<frame_type>,<padding>,<frame_color>,<fill_color>,<chart_data>;ds=<which_series>;dp=<which_points>;py=<z_order>;po=<x,y>;of=<x_offset,y_offset>
alignment_string
[Solo sin burbuja] Es la parte del gráfico incorporado sin burbujas que se fija al punto de datos. Elige una de las constantes de string de dos letras del siguiente diagrama:Cadenas de alineación
chart_data
Los datos del gráfico incorporado. Es todo lo que se encuentra después de https://chart.googleapis.com/chart? en la URL del gráfico que se incorpora. Usa la herramienta que se muestra a continuación o sigue las reglas que se indican debajo.
frame_type
[Solo burbujas]: Una de las constantes de estilo de marco del ícono dinámico.
padding
[Solo la burbuja] Padding dentro de la burbuja, en píxeles.
frame_color
[Solo burbujas] Es el color del marco, como una cadena de color HTML de seis dígitos sin la marca #. Ejemplo: FF00FF.
fill_color
[Solo burbujas] Color de relleno de la burbuja, como una string de color HTML de seis dígitos sin la marca #. Ejemplo: FF00FF.

Datos de gráficos incorporados

Usa la siguiente herramienta de conversión para generar tu string de gráfico, o bien genera la string de forma manual siguiendo las reglas especificadas después de la herramienta.

Reglas para la conversión manual

1. Primero, reemplaza todos los caracteres siguientes en los pares de parámetro y valor por los siguientes valores, en el orden que se muestra:

Reemplazar Con esta
%7C o %7c
|
@
@@
%
%25
,
@,
|
@|
;
@;
y
%26
=
%3D

2. Luego, reemplaza con comas todos los valores & y = de los pares parameter1=value1&parameter2=value2....

Volver al principio

Relleno de línea chm [Línea, radar]

Puedes rellenar el área debajo de una línea de datos con un color liso.

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

Sintaxis

chm=
  <b_or_B>,<color>,<start_line_index>,<end_line_index>,<0>
    |...|
  <b_or_B>,<color>,<start_line_index>,<end_line_index>,<0>
<b_or_B>
Indica si se debe rellenar hasta la parte inferior del gráfico o solo hasta la línea inferior siguiente.
  • B: Rellenar desde <start_line_index> hasta la parte inferior del gráfico. <end_line_index> admite una sintaxis especial que te permite completar un segmento del gráfico. Esto es más fácil si tienes un gráfico con una sola línea que deseas rellenar.
  • b: Rellenar entre dos líneas en un gráfico de varias líneas. Las líneas de inicio y finalización se indican con <start_line_index> y <end_line_index>.
<color>
Es un número hexadecimal con formato RRGGBB del color de relleno.
<start_line_index>.
Es el índice de la línea en la que comienza el relleno. La primera serie de datos especificada en chd tiene un índice de cero (0), la segunda serie de datos tiene un índice de 1, y así sucesivamente.
<end_line_index>
  • Tipo de relleno “b”: Línea en la que se detiene el relleno. Esta línea debe estar por debajo de la línea actual.
  • Tipo de relleno “B”: Una de las siguientes opciones:
    • any value: Cualquier número en este parámetro se ignora y el relleno irá desde la línea especificada hasta la base del gráfico.
    • start:end: Para rellenar una porción vertical debajo del gráfico, especifica start:end, donde estos son índices de datos que describen dónde comenzar y detener el relleno. Ambos valores son opcionales y se establecen de forma predeterminada como first_point:last_point. (consulta el siguiente ejemplo).
<0>
Reservado: debe ser cero.

 

Ejemplos

Descripción Ejemplo

Para una sola serie, es más fácil usar chm=B. Esto ocupa toda el área debajo de la línea.

Este es el único tipo de área de relleno disponible para los gráficos radiales. chm=b no funciona con gráficos radiales.


chm=B,76A4FB,0,0,0

Este es un gráfico con dos líneas y dos rellenos. Rellenar el área debajo de la línea inferior y por encima de la línea superior requiere una técnica especial, que se explica a continuación.


chd=s:
cefhjkqwrlgYcfgc,
QSSVXXdkfZUMRTUQ,
HJJMOOUbVPKDHKLH,

chm=
b,224499,0,1,0| (azul)
b,FF0000,1,2,0| (rojo)

En un gráfico de varias líneas, para completar desde la parte superior del gráfico hasta la primera línea, incluye una serie que contenga dos copias del valor de datos más alto para el formato de datos. Por ejemplo, "...." para la codificación extendida, "100,100" para el formato de texto básico, etcétera. Rellena desde esta serie hasta la línea superior.

Para rellenar desde la última línea hasta la parte inferior del gráfico, incluye una serie que contenga dos copias del valor de datos más bajo para el formato de datos. Por ejemplo, AAAA para la codificación extendida, 0,0 para el formato de texto básico, etcétera.

Las líneas en sí se dibujan en negro con chco.

Tres líneas en un gráfico; el gráfico está sombreado de color verde desde la parte inferior hasta la primera línea, rojo desde la primera a la segunda línea, azul oscuro desde la segunda línea hasta la tercera y azul pálido desde la tercera línea hasta la parte superior del gráfico.
chd=e:
  ....,
(valor más alto)
  cefhjkqwrlgYcfgc,
  QSSVXXdkfZUMRTUQ,
  HJJMOOUbVPKDHKLH,
  AAAA
(valor cero)
chm=
  b,76A4FB,0,1,0|
(azul claro)
  b,224499,1,2,0| (azul)
  b,FF0000,2,3,0| (rojo)
  b,80C65A,3,4,0 (verde)
chco=000000

Este es un gráfico de líneas con porciones de relleno verticales. Esto se logra especificando un par start:end para <end_line_index> con el tipo de relleno de línea 'B'.

  • B,76A4FB,0,0:3,0: Relleno vertical azul debajo de la línea 0, vinculado por los datos 0 a 3.
  • B,990000,0,7:10,0: Relleno vertical rojo debajo de la línea 0, vinculado por los datos 7 a 10.
  • B,DEDC06,0,12:,0: Relleno vertical amarillo debajo de la línea 0, desde el punto de datos 12 hasta el final de la serie.

chm=
  B,76A4FB,0,0:3,0|
  B,990000,0,7:10,0|
  B,DEDC06,0,12:,0

En este ejemplo, se muestra cómo usar un relleno de líneas en un gráfico radial.

Gráfico radial
chm=
  B,FF000080,0,1.0,5.0|
  B,FF990080,1,1.0,5.0

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

Marcadores de rangos chm [Barra, vela, línea, radar, dispersión]

Puedes colorear bandas horizontales o verticales de relleno del fondo para destacar áreas específicas de un gráfico.

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

Sintaxis

Especifica un conjunto de los siguientes parámetros para cada banda que se dibujará. Para dibujar varias bandas, crea conjuntos de parámetros adicionales, delimitados por un carácter de barra vertical. Los rangos se dibujan en el orden especificado, de manera que el último se dibujará sobre los anteriores.

chm=
  <direction>,<color>,0,<start_point>,<end_point>
    |...|
  <direction>,<color>,0,<start_point>,<end_point>
<direction>
Especifica el sombreado horizontal o vertical. Usa r para un rango horizontal y R para un rango vertical.
<color>
Es el color del rango como un número hexadecimal con formato RRGGBB.
0
Reservado: debe ser cero.
<start_point>
Es la posición inicial del rango.
  • En el caso de los marcadores de rango horizontal, esta es una posición en el eje Y, donde 0.00 es la parte inferior del gráfico y 1.00 es la parte superior.
  • En el caso de los marcadores de rango vertical, corresponde a una posición en el eje X, en la que 0.00 es la izquierda del gráfico y 1.00 es la derecha del gráfico.
<end_point>
Es la posición final del rango.
  • En el caso de los marcadores de rango horizontal, esta es una posición en el eje Y, donde 0.00 es la parte inferior del gráfico y 1.00 es la parte superior.
  • En el caso de los marcadores de rango vertical, corresponde a una posición en el eje X, en la que 0.00 es la izquierda del gráfico y 1.00 es la derecha del gráfico.

 

Ejemplos

Descripción Ejemplo

Los marcadores de intervalo pueden ser una línea delgada o una banda de color.

  • r,E5ECF9,0,0.75,0.25: Marcador de rango, color azul pálido (reservado), 0.5 de la altura del gráfico.
  • r,000000,0,0.1,0.11: Es un marcador de rango, negro (reservado), que comienza en el punto 0.1 hacia arriba del eje Y y termina en el 0.11 hacia arriba del eje Y (una línea negra delgada).
Gráfico de líneas con una banda horizontal azul pálido que se extiende del 25% al 75% hacia arriba en el eje Y y una línea horizontal delgada del diez por ciento hacia arriba en el eje Y
chm=
  r,E5ECF9,0,0.75,0.25|
  r,000000,0,0.1,0.11

En este ejemplo, se muestran los marcadores de rango vertical. El primer marcador es una línea roja (FF0000) y el segundo es una banda de color azul pálido (A0BAE9).

Gráfico de líneas con una banda vertical azul pálido que se extiende del 25 al 75 por ciento a lo largo del eje X y una línea vertical delgada del diez por ciento a lo largo del eje X
chm=
  R,FF0000,0,0.1,0.11|
  R,A0BAE9,0,0.75,0.25

Los marcadores se dibujan en el orden especificado. En este ejemplo, puedes ver que el marcador rojo vertical se dibujó antes del marcador horizontal azul pálido.

Gráfico de líneas con una banda vertical azul y una banda horizontal azul más pálido que se extiende del 25% al 75% del camino a lo largo del eje X e Y, respectivamente. Línea roja vertical delgada y línea negra horizontal delgada al diez por ciento del camino a lo largo de los ejes &quot;x&quot; e &quot;y&quot;, respectivamente
chm=
  R,FF0000,0,0.1,0.11|
  R,A0BAE9,0,0.75,0.25|
  r,E5ECF9,0,0.75,0.25|
  r,000000,0,0.1,0.11

A continuación, se muestra un ejemplo de un gráfico de líneas en el que se usan marcadores de rango para dibujar líneas horizontales tenues en el gráfico en la línea cero, la línea de punto medio y la parte superior.

Minigráfico con una sola línea amarilla y tres líneas horizontales con el mismo espaciado
chm=
  r,000000,0,0.499,0.501|
  r,000000,0,0.998,1.0|
  r,000000,0,0.0,0.002

Volver al principio

Marcadores de línea chm=D [Barra, vela, línea, radar, dispersión]

Puedes agregar una línea que haga un seguimiento de los datos en tu gráfico. Por lo general, se usa en los gráficos compuestos.

Para agregar varias líneas (o combinar esto con cualquier otro marcador chm), separa los conjuntos de parámetros chm con un delimitador de barra vertical ( |). No puedes crear un marcador de línea punteada con este parámetro.

Sintaxis

chm=
  D,<color>,<series_index>,<which_points>,<width>,<opt_z_order>
D
Indica que es un marcador de línea.
<color>
Es el color de la línea, en formato hexadecimal RRGGBB.
<series_index>
Es el índice de la serie de datos que se usa para trazar la línea. El índice de la serie de datos es 0 para la primera serie de datos, 1 para la segunda, y así sucesivamente.
<which_points>
Cuáles son los puntos de una serie que se deben usar para trazar la línea Usa uno de los siguientes valores:
  • 0: Usa todos los puntos de la serie.
  • start:end: Usa un rango específico de puntos en la serie, desde el inicio hasta el final inclusive (índice basado en cero). También puedes usar valores de punto flotante para especificar puntos intermedios o dejar start o end en blanco para indicar el primer o último dato, respectivamente. Los valores de start y end pueden ser negativos, como un índice inverso del último valor. Si tanto start como end son negativos, asegúrate de escribirlos en valor creciente (por ejemplo, -6:-1).
<size>
Es el ancho de la línea en píxeles.
<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).

 

Ejemplos

Descripción Ejemplo

Este es un ejemplo de cómo dibujar una línea de marcador en un gráfico de barras. El orden Z se establece en 1, por lo que la línea se dibuja sobre las barras.

En este ejemplo, se usan los mismos datos para las barras y la línea de datos.
Gráfico de barras con marcador de línea
chm=D,0033FF,0,0,5,1
chd=s:1XQbnf4

Este es el mismo gráfico de barras, pero con una serie de datos adicional solo para la línea. Este es un ejemplo de un gráfico compuesto. Para dibujar los gráficos compuestos, se agregan series de datos adicionales al parámetro chd, más un valor en chd que indica al gráfico que ignore la serie de datos adicional.

Consulta Gráficos compuestos para obtener más información.

Gráfico de barras con marcador de línea
chm=D,0033FF,1,0,5,1
chd=s1:1XQbnf4,43ksfg6

Volver al principio

Funciones de datos chfd [Todos los chd gráficos]

Puedes especificar una función personalizada para que se ejecute en los datos del gráfico con la sintaxis de la función muParser. Los datos usados en la función pueden provenir de una de dos fuentes:

  • Una serie de datos de chd: Los datos se extraen de la serie especificada en chd.
  • Un rango de valores declarado en el parámetro chfd: declaras un valor de inicio, parada y paso para un rango de datos arbitrario.

Es importante tener en cuenta que, en todos los casos, debes asignar el resultado a una serie existente en chd; esa serie se reemplazará por el resultado de la función. El gráfico se renderiza solo después de que se hayan procesado todas las funciones, por lo que, si asignas varias funciones como resultado a la misma serie de datos, las funciones se ejecutarán en el orden dado, pero solo el resultado de la función final se representará en el gráfico. Ten en cuenta que puedes encadenar funciones, de modo que una función pueda tomar como entrada una serie que una función anterior generó.

Para asignar colores o marcadores chm a una línea de función, asígnalos al índice de serie de la función. Ten en cuenta que los marcadores se ubican según los datos después de que la función los haya manipulado.

Sintaxis

chfd=
  <output_series_index>,<function_data>,<function_string>
    |...|
  <output_series_index>,<function_data>,<function_string>
<output_series_index>
Índice basado en cero de una serie de datos en chd en la que se escribirá el resultado de la función. El resultado de la función reemplazará por completo todos los datos existentes. Si una serie no se usa como entrada para una función, la práctica recomendada es asignar un solo valor ficticio a esa serie.
<function_data>
Las variables y los datos que se van a graficar. Los datos pueden pertenecer a un rango que definas o a una de las series de datos chd. Puedes especificar muchas variables para cada función mediante un delimitador ; (punto y coma) para múltiples variables. Ten en cuenta que si defines múltiples variables para una sola función y estas tienen una cantidad de puntos diferente, la función se detendrá cuando llegue al primer extremo. Por ejemplo, si una función define tanto x=1-5 paso 1 e y=1-10 paso 1, la función finalizará cuando alcance el quinto punto.
    <variable_name>,<input_series_index>
        
O
    <variable_name>,<start>,<end>,<step>
  • variable_name: Un nombre de string arbitrario para la variable. Úsalo en la función definida por function_string.
  • input_series_index: Es el índice de una serie de datos chd que se usa como datos de entrada.
  • inicio: Valor numérico inicial de un rango.
  • fin: Es el valor numérico final de un rango.
  • step: Valor numérico del paso desde start hasta end. Puede ser positivo o negativo, pero no puede ser cero.
Ejemplos: x,0,100,1 declara una variable llamada x con valores 0, 1, 2, ... 100. x,0,100,1;r,0,3.1,.1 declara la misma variable x más una variable llamada r con valores 0, 0.1, 0.2, ..., 3.0, 3.1. x,0 declara una variable llamada x que usa los datos de la primera serie de chd. function_string usará estas variables. No se representarán en el gráfico, a menos que las especifiques en function_string. Cuanto más pequeño sea el paso, más fluido será el gráfico.
<function_string>
Tu función, escrita en la sintaxis de muParser. La función se aplica a las variables y los datos especificados en variable_data. Solo puedes hacer referencia a las variables declaradas en este conjunto de funciones locales, no en otro conjunto canalizado de parámetros chfd. Las funciones muParser de resumen no son compatibles (mínimo, suma máxima, promedio). IMPORTANTE: Recuerda usar %2B en lugar de + en tus funciones.

 

Ejemplos

Descripción Ejemplo

Una onda sinusoidal simple. Debes tener en cuenta lo siguiente:

  • chd=t:-1: Usamos una variable de prueba para los datos del gráfico porque nuestros datos se declaran en el parámetro chfd.
  • chco=FF0000: Se especifica el rojo para la primera serie. Aunque no usamos los datos de chd, se usará el color correspondiente de esa serie para esa función trazada.
  • chfd=0,x,0,11,0.1,sin(x)*50%2B50: Declaramos una variable, llamada x, con valores de 0 a 11, incrementados por 0.1. Se asigna a la primera serie, lo que significa que obtendrá el primer color de serie (FF0000). La función aplicada a x es sen(x) * 50 + 50. Observa cómo debemos codificar el signo + en esa función.

 

Onda sinusoidal especificada por chfd
cht=lc
chd=t:-1
chco=FF0000
chfd=
  0,x,0,11,0.1,sin(x)*50%2B50
chxt=x,y
Esta línea usa datos del parámetro chd.
chd=t:5,10
chfd=0,x,0,x*4

Es una combinación de líneas de funciones y líneas que no son funcionales.

Observa cómo el parámetro de color de la serie chco especifica los colores.

Observa la posición de los marcadores en el resultado de la función. Los datos se calculan a partir del inicio, el final y el paso, de modo que si tu rango es del 0 al 11 (paso 0.1), el punto 0 es 0, el punto 1 es 0.1 y así sucesivamente, hasta el punto 110, que tiene un valor de 11.

Una serie usa chfd y la otra, para sus datos.
chd=t:
  -1
  15,45
chco=
  FF0000,000000
chfd=
  0,x,0,11,0.1,sin(x)*50%2B50
chm=
  c,00A5C6,0,110,10
  a,00A5C6,0,60,10

Para definir una función en dos dimensiones, usa un gráfico lxy, asigna dos series ficticias y una función a cada una.

  • 0,x,0,10,0.1,sin(x)*50%2B50: La serie 0 (los valores del eje X) tiene una variable llamada x, con valores del 0 al 10, paso 0.1 y una función sen(x)*50 + 50.
  • 0,y,0,10,0.1,sin(y)*50%2B50: La serie 0 (los valores del eje Y) tiene una variable llamada y, con valores del 0 al 10, paso 0.1, y una función sen(x)*50 + 50.
Un círculo
cht=lxy
chd=t:-1|-1
chfd=
  0,x,0,10,0.1,sin(x)*50%2B50|
  1,y,0,10,0.1,cos(y)*50%2B50

El parámetro chfd realmente te permite expresar tu creatividad.

Haz clic en estas imágenes para abrirlas y jugar con ellas en la zona de pruebas de gráficos. Quedarás atrapado.



Volver al principio