Lista de funciones del gráfico

En esta página, se describen todas las funciones y los parámetros compatibles con la API de Chart. Algunos de estos parámetros se comportan de manera diferente según el tipo de gráfico; en ese caso, la documentación se vincula a la documentación del gráfico adecuada.

Parámetros

Estos son los parámetros admitidos por la API de Google Chart.

Parámetro Descripción y sintaxis Tipos de gráficos
chbh Ancho y espaciado de las barras

chbh=
  <bar_width_or_scale>,
  <space_between_bars>,
  <space_between_groups>

Bar
CHCO Colores de la serie
chco=
  <series_1_element_1>|...|<series_1_element_n>,   <series_2>,...,<series_m>
Bar, Google-o-meter, Line, Map, Pie, Radar, Scatter, Venn
CHD Cadena de datos del gráfico
chd=
  t:s,e,r,i,e,s,1|s,e,r,i,e,s,2|...
o
  s:series1,series2,...
o
  e:series1,series2,...
Todos los gráficos
chdl, chdlp y chdl Texto y estilo de la leyenda del gráfico

chdl=
  <data_series_1_label
>
   |...|
  <data_series_n_label>

chdlp=<opt_position>|<opt_label_order>

chdls=<color>,<font_size>

Bar, Candlestick, Google-o-meter, Line, Pie, Radar, Scatter y Venn
CHD Escala para el formato de texto con rango personalizado
chds=
  <series_1_min>,
  <series_1_max>,...
Todos los gráficos que pueden aceptar chd
química Marcadores de íconos dinámicos
chem=
  y;s=<icon_string_constant>;
  d=<marker_data_string>;
  ds=<which_series>;
  dp=<opt_which_points>;
  py=<opt_z_order>;
  po=<x,y>;
  of=<x_offset,y_offset>
Barra, Candlestick, Line, Radar, Dispersión
CHF Relleno de gradientes
chf=
  <fill_type>,
  lg,
  <angle>,
  <color>
Bar, Candlestick, Google-o-meter (solo en segundo plano), Line, Pie (solo en segundo plano), Radar, Scatter y Venn
CHF Rellenos a rayas
chf=
  <fill_type>,
  ls,
  <angle>,
  <color_1>,<width_1>
    ,...,
  <color_n>,<width_n>
Bar, Candlestick, Google-o-meter (solo en segundo plano), Line, Pie (solo en segundo plano), Radar, Scatter y Venn
CHF Relleno sólido
chf=
  <fill_type>,
  s,
  <color>
Bar, Candlestick, Google-o-meter (solo en segundo plano), Line, Map (solo en segundo plano), Radar, Scatter, Venn, Pie
CHFD Funciones de datos
chfd=
  <series_index>,
  <variable_data>,
  <function_string>
    |...|
Todos los gráficos que pueden aceptar chd
cambio Líneas de cuadrícula
chg=
  <x_axis_step_size>,
  <y_axis_step_size>,
  <opt_dash_length>,
  <opt_space_length>,
  <x_offset>,
  <y_offset>
Barra, Candlestick, Line, Radar, Dispersión
CL Etiquetas del gráfico circular, etiqueta de Google-o-meter
chl=<label>|...
Google-o-meter y Pie
chld Datos de etiquetas del gráfico (varios tipos)
chld=<chart-specific_data>|<chart-specific_data>|...
Íconos dinámicos independientes
CLS Estilos de línea
chls=
  <line_1_thickness>,
  <opt_dash_length>,
  <opt_space_length>|...
Línea, Radar
chm=D Marcadores de línea
chm=
  D,
  <color>,
  <series_index>,
  <which_points>,
  <width>,
  <opt_z_order>|...
Barra, Candlestick, Line, Radar, Dispersión
chm=r|R Marcadores de rango
chm=
  <r_or_R>,
  <color>,
  0,
  <start_point>,
  <end_point>|...
Barra, Candlestick, Line, Radar, Dispersión
chm=
a|c|C
d|E|o|
h|H|
s|S|
v|V|x
Marcadores de forma
chm=
  <marker_type>,
  <color>,
  <series_index>,
  <opt_which_points>,
  <size>,
  <opt_z_order>,
  <opt_offset>|...
Barra, Candlestick, Line, Radar, Dispersión
chm=
f|t|A|N
Marcadores de valores de texto y datos
chm=
  <marker_type>,
  <color>,
  <series_index>,
  <opt_which_points>,
  <size>,
  <opt_z_order>|
  <opt_placement> ...
Barra, Candlestick, Line, Radar, Dispersión
chm=F Marcadores de velas
chm=
  F,
  <opt_declining_color>,
  <data_series_index>,
  <opt_which_points>,
  <width>,
  <opt_z_order>
Barra, Candelabro, Línea
chm=b/B Rellenos de línea
chm=
  <b_or_B>,
  <color>,
  <start_line_index>,
  <end_line_index>,
  <0>
Bar (solo con marcadores de línea), Line, Radar
CMA Márgenes del gráfico
chma=
  <left_margin>,
  <right_margin>,
  <top_margin>,
  <bottom_margin>
 |<opt_legend_width>,
   <opt_legend_height>
Bar, Candlestick, Google-o-meter, Line, Map, Pie, Radar, Scatter y Venn
chof Formato de salida
chof=<format>
Todos los gráficos
CHP Línea cero del gráfico de barras, Orientación del gráfico circular
chp=<zero_val>,...
Bar y Circular
chs Tamaño del gráfico
chs=<width>x<height>
Todos los gráficos
chst Tipo de ícono dinámico
chst=<icon_string_constant>
Íconos dinámicos independientes
CT Tipo de gráfico
cht=<chart_type>
Todos los gráficos
chtm Área geográfica
chtm=<zoom_area>
Mapa
chtt, chts Título y estilo del gráfico

chtt=<chart_title>

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

Bar, Candlestick, Google-o-meter, Line, Pie, Radar, Scatter y Venn
chxt Ejes visibles
chxt=<axis_1>,...
Bar, Candlestick, Google-o-meter, Line, Radar, Scatter
CRX Rangos de ejes
chxr=
  <axis_index>,
  <start_val>,
  <end_val>,
  <opt_step>|...
Bar, Candlestick, Google-o-meter, Line, Radar, Scatter
CHXL Etiquetas de ejes
chxl=
  <axis_index>:|<label_1>|...
Bar, Candlestick, Google-o-meter, Line, Radar, Scatter
CDP Posiciones de las etiquetas de los ejes
chxp=
  <axis_index>,
  <label_1_position>,
  ...,<label_n_position>
  |...
Bar, Candlestick, Google-o-meter, Line, Radar, Scatter
csl vr Estilos de etiquetas de ejes
chxs=
  <axis_index>
  <opt_format_string>,
  <opt_label_color>,
  <opt_font_size>,
  <opt_alignment>,
  <opt_axis_or_tick>,
  <opt_tick_color>,
  <opt_axis_color>|...
Barra, Candlestick, Google-o-meter (limitada), Línea, Radar, Dispersión
ctxtc Estilos de marcas de verificación de los ejes
chxtc=
  <axis_index_1>,
  <tick_length_1>,...,<tick_length_n>
  |...
Barra, Candlestick, Line, Radar, Dispersión

Formato de color

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

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

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

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

Volver al principio

Tamaño del gráfico chs [Todos los gráficos]

Se debe especificar el tamaño de todos los gráficos. Este parámetro determina el ancho y la altura totales de la imagen del gráfico, incluidas las leyendas, los márgenes y los títulos. Las leyendas, los márgenes y los títulos se recortan para que se ajusten al tamaño total del gráfico.

El tamaño máximo del gráfico para todos los gráficos, excepto los mapas, es de 300,000 píxeles en total, y el ancho o la longitud máximos es de 1,000 píxeles. El tamaño máximo de los mapas es 440 x 220.

Los valores son números enteros.

Sintaxis

chs=<width>x<height>
<width>
Ancho en píxeles. El valor máximo es 1,000. El ancho por altura no puede ser superior a 300,000.
<height>
Altura en píxeles. El valor máximo es 1,000. El ancho x alto no puede ser superior a 300,000.

 

Ejemplo

Descripción Ejemplo

Un gráfico de 250 píxeles x 100 píxeles

Gráfico circular amarillo
chs=250x100

Volver al principio

Tipo de gráfico cht [Todos, excepto los íconos dinámicos]

Especifica el tipo de gráfico con el parámetro cht. Consulta las páginas de documentación de los gráficos individuales para obtener una lista de los tipos de gráficos disponibles.

Sintaxis

cht=<type>[:nda]
<type>
Uno de los valores de tipo de gráfico
:nda
[Opcional, solo gráficos de líneas] Puedes agregar :nda después del tipo de gráfico en los gráficos de líneas para ocultar los ejes predeterminados.

 

Ejemplos

Descripción Ejemplo

Un gráfico circular

Gráfico circular amarillo
cht=p
Un diagrama de Venn Diagrama de Venn con tres círculos superpuestos; un círculo es azul y los demás son verdes
cht=v
Un gráfico de líneas con y sin ejes predeterminados.

   Gráfico de líneas con ejes predeterminados       Gráfico de líneas con ejes ocultos
          cht=lc                      cht=lc:nda

Volver al principio

Colores de la serie chco [todos los gráficos]

Puedes especificar los colores de una serie específica, o todos los elementos de una serie, con el parámetro chco. La sintaxis exacta y el significado pueden variar según el tipo de gráfico. Consulta el tipo de gráfico específico para obtener más detalles.

Sintaxis

chco=
  <series_1_element_1>|...|<series_1_element_n>,<series_2>,...,<series_m>

Cada entrada de esta string es un número hexadecimal de formato RRGGBB. Los colores que se aplican a una serie completa están delimitados por una coma, mientras que los que se aplican a elementos individuales dentro de una serie están delimitados por una barra. Para la mayoría de los tipos de gráfico, puedes combinar descripciones de colores para series completas y elementos de series individuales. Si hay más series o elementos en el gráfico que los colores especificados en la string, la API suele alternar los colores de los elementos desde el inicio de esa serie (para los elementos) o los colores de la serie desde el comienzo de la lista de series. Una vez más, consulta la documentación de tu gráfico individual para obtener más detalles.

 

Ejemplos

Descripción Ejemplo

Si especificas un solo color para cada serie de un gráfico de líneas, a cada línea se le asigna el color correspondiente. Este ejemplo tiene tres series de datos y tres colores especificados.

Gráfico de líneas con una línea roja, una azul y una verde

chco=FF0000,00FF00,0000FF

Este gráfico de líneas también tiene tres series de datos, pero solo se especifican dos colores. Como el color de la tercera serie no se especifica, la tercera línea se dibuja con el primer color (rojo).

Gráfico de líneas con dos líneas rojas y una línea azul

chco=FF0000,0000FF

En este ejemplo, se muestra cómo especificar un color para los miembros individuales de una serie (barras en este ejemplo).

Gráfico de barras verticales con dos conjuntos de datos: un conjunto de datos de color azul oscuro y el otro de color azul pálido

cht=bvs
chco=FFC6A5|FFFF42|DEF3BD|00A5C6|DEBDDE

Esto demuestra cómo se especifican tanto los colores de la serie como los colores de los elementos individuales. La primera serie está completa en negro (000000). La segunda serie, marcada por una coma, tiene colores individuales asignados y delimitados por caracteres |.

Gráfico de barras horizontales con un punto de datos en rojo, el segundo en verde y el tercero en azul

chco=000000,FF0000|00FF00|0000FF

Volver al principio

Formato de salida chof [Todos los gráficos]

Puedes elegir el formato de salida de tu gráfico con el parámetro chof. Este parámetro también se puede usar para mostrar información de depuración cuando diseñas tu gráfico. Ten en cuenta que algunos formatos de salida son gráficos (por ejemplo, PNG y GIF), pero otros no. Si usas un formato no gráfico como parámetro src de una etiqueta <img>, se generará una imagen dañada en la página.

Sintaxis

chof=png|gif|json|validate.

Especifica una de las siguientes cadenas:

  • "png": Muestra el gráfico como una imagen PNG.
  • "gif": Muestra el gráfico como una imagen GIF.
  • "json": Muestra datos del mapa de imágenes para el gráfico, como una string JSON. Se puede usar para generar un mapa de imágenes del gráfico que permita que se pueda hacer clic en varias regiones. Consulta Cómo crear un mapa de imágenes de gráfico para ver el formato de esta cadena y más información sobre cómo usarla.
  • "validar": muestra una página HTML que enumera los errores en la URL del gráfico. Consulta Depuración para obtener más sugerencias.

 

Ejemplos

Descripción Ejemplo

A continuación, se muestran ejemplos de PNG y GIF del mismo gráfico:

Gráfico de barras verticales con título
chof=png
Gráfico de barras verticales con título
chof=gif

Un gráfico con una URL no válida: https://chart.googleapis.com/chart?cht=bvs&chd=s:YUVmw1&chco=0000FF&chs=180x150&chtt=Site+visitors&chts=0000FF,20,20&chbh=22,4&chof=validate (¿puedes detectar el error?)

Si especificas chof=validate, se muestra una página HTML. Aquí la convertimos en la fuente de un <iframe> para que puedas ver la página de resultados.


Ejemplo de URL incorrecta con chof=validate

Este es el código HTML que se muestra para una URL válida cuando chof=validate.

https://chart.googleapis.com/chart?cht=bvs&chd=s:YUVmw1&chco=FF0000&chs=180x150&chtt=Site+visitors+by+month|January+to+July&chbh=22,4&chof=validate


URL del gráfico válida en un <iframe>

Volver al principio

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

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

Sintaxis

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

 

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

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

 

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

<color>
Es el color del título, en formato hexadecimal RRRGGBB. El color predeterminado es el negro.
<font_size>
Es el tamaño de la fuente del título, en puntos.
<opt_alignment>
[Opcional] Alineación del título Elige uno de los siguientes valores de cadena que distinguen mayúsculas de minúsculas: "l" (izquierda), "c" (centrado) "r" (derecha). La configuración predeterminada es “c”.

 

Ejemplos

Descripción Ejemplo

Un gráfico con un título, con el color y el tamaño de fuente predeterminados.

Especifica un espacio con un signo más (+).

Usa un carácter de barra vertical (|) para forzar un salto de línea.

chts no se especifica aquí.

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

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

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

Volver al principio

Estilo y texto 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 de texto de cada serie. Puedes especificar el texto asociado con cada serie de esta leyenda y especificar en qué lugar del gráfico debe aparecer.

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

Nota sobre los valores de cadena: Solo se permiten caracteres seguros para URL en las cadenas de etiquetas. Para estar seguro, debes codificar en formato URL 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>
Es el texto de las entradas de la leyenda. Cada etiqueta se aplica a la serie correspondiente en el array chd. Usa el signo + para agregar un espacio. Si no especificas este parámetro, el gráfico no tendrá una leyenda. No hay forma de especificar un salto de línea en una etiqueta. Por lo general, la leyenda se expandirá para conservar el texto de la leyenda, y el área del gráfico se reducirá para acomodar la leyenda.

chdlp : [Opcional] La posición de la leyenda y el orden de las entradas de la leyenda. Puedes especificar <position> o <label_order>. Si especificas ambas, sepáralas con un carácter de barra. Puedes agregar una “s” a cualquier valor si deseas que las entradas de leyenda vacías de 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 a la izquierda del gráfico, 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, como se indica en 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 (el más corto primero), según la medición en bloques de 10 píxeles. Cuando dos elementos tienen la misma longitud (divididos en bloques de 10 píxeles), aparecerá primero el de la lista.
  • 0,1,2...: Orden de etiquetas personalizado. Esta es una lista de índices de etiquetas basados en cero de chdl, separados por comas.

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

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

 

Ejemplos

Descripción Ejemplo

Dos ejemplos de leyendas. Especifica el texto de la leyenda en el mismo orden que tus 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 delimitados 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 horizontales (chdlp=t, el diseño predeterminado es horizontal) y, en el segundo, las entradas de leyenda verticales inferiores (chdlp=bv).

Diagrama de Venn con dos círculos más pequeños delimitados 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 delimitados 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 delimitados por un círculo más grande
chdls=0000CC,14

Volver al principio

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

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

De forma predeterminada, los márgenes son los que quedan después de calcular el tamaño del gráfico. Este valor predeterminado varía según el tipo de gráfico. Los márgenes que especificas son un valor mínimo. Si el área del gráfico deja lugar para los márgenes, el tamaño del margen será el que quede. No puedes apretar los márgenes más pequeños de lo necesario para cualquier leyenda o etiqueta. A continuación, se incluye un diagrama en el que se muestran las partes básicas de un gráfico:

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

Los márgenes del gráfico incluyen las etiquetas de ejes y el área de la leyenda. El área de la leyenda cambia su tamaño automáticamente para ajustarse al texto con exactitud, a menos que especifiques un ancho mayor con chma, en cuyo caso se expandirá el tamaño del margen y se reducirá el área del gráfico. No puedes recortar una leyenda mediante la especificación de un tamaño demasiado pequeño, pero puedes hacer que ocupe más espacio del necesario.

Sugerencia: En un gráfico de barras, si las barras tienen un tamaño fijo (el valor predeterminado), no se puede reducir el ancho del área del gráfico. Debes especificar un tamaño de barra más pequeño o que se pueda cambiar de tamaño con chbh.

 

Sintaxis

chma=
  <left_margin>,<right_margin>,<top_margin>,<bottom_margin>|<opt_legend_width>,<opt_legend_height>
<left_margin>, <right_margin>, <top_margin> y <bottom_margin>
Tamaño de margen mínimo alrededor del área del gráfico, en píxeles Aumenta este valor para incluir algo de padding y evitar que las etiquetas de los ejes profundicen en los bordes del gráfico.
<opt_legend_width>, <opt_legend_height>
[Opcional] Es el ancho del margen alrededor de la leyenda, en píxeles. Usa esta opción para evitar que la leyenda aparezca sobre el área del gráfico o los bordes de la imagen.

 

Ejemplos

Descripción Ejemplo

En este ejemplo, el gráfico tiene un margen mínimo de 30 píxeles por cada lado. Debido a que la leyenda del gráfico tiene más de 30 píxeles de ancho, el margen del lado derecho se establece en el ancho de la leyenda del gráfico y es diferente de los demás márgenes.

Las etiquetas de los ejes están fuera del área de trazado y, por lo tanto, se dibujan dentro del espacio del margen.

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

Para agregar un margen alrededor de la leyenda, establece un valor para los parámetros <opt_legend_width> y <opt_legend_height>.

En este ejemplo, la leyenda tiene aproximadamente 60 píxeles de ancho. Si estableces <opt_legend_width> en 80 píxeles, el margen se extiende a 20 píxeles fuera de la leyenda.

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

Volver al principio

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

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

No todos los gráficos muestran las líneas de los ejes de forma predeterminada. Puedes especificar exactamente qué ejes debe mostrar tu gráfico mediante el parámetro chxt. Las líneas del eje predeterminadas no muestran números. Debes especificar un eje en el parámetro chxt para que se muestren los números.

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

Si eliges usar valores personalizados, por ejemplo, "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 de eje personalizadas y numéricas.

Nota sobre los valores de cadena: Solo se permiten caracteres seguros para URL en las cadenas de etiquetas. Para estar seguro, debes codificar en formato URL 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 abarcan los siguientes temas:


Ejes visibles chxt

Los diagramas de barras, líneas, radares y dispersión muestran una o dos líneas de eje de forma predeterminada, pero estas líneas no incluyen valores. Para mostrar valores en las líneas de tus 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 del eje en 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, los ejes inferior y superior no muestran las marcas de los valores, mientras que los ejes izquierdo y derecho sí las muestran. Puedes cambiar este comportamiento con el parámetro chxs.

Sintaxis

chxt=
  <axis_1>
    ,...,
  <axis_n>
<axis>
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 en un eje que muestra valores numéricos (consulta el siguiente ejemplo). Los ejes se dibujan de adentro hacia afuera, por lo tanto, si tienes x,x, la primera x se refiere a la copia más interna, la siguiente x se refiere a la siguiente copia hacia afuera, 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 se establece de forma predeterminada en un rango de 0 a 100 para todos los ejes.

Ten en cuenta que, de forma predeterminada, los ejes inferior y superior no 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 x y dos conjuntos de ejes Y. Esto no es muy útil cuando se usan solo las etiquetas de eje predeterminadas, como se muestra aquí. Sin embargo, puedes especificar etiquetas personalizadas para cada copia de cada eje mediante 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=200x1"translate="nox2"





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.

Las etiquetas de los ejes se omiten, por lo que la API de Chart muestra un rango de 0 a 100 para el eje x y el t.

El rango del eje y y del eje r está determinado por el número 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 se centra en la base de la primera barra, la segunda etiqueta se centra 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

Para suprimir los ejes predeterminados en un gráfico de líneas, especifica :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 del eje. Si deseas que los números de los ejes describan los valores de datos reales, configura <start_val> y <end_val> en los valores inferior y superior de tu rango de formato de datos, respectivamente. Consulta Escalamiento de eje para obtener más información.

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

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

Sintaxis

Separa los rangos de etiquetas de varios ejes 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_índice>
Eje al que se aplicarán las etiquetas. Este es un índice basado en cero en el array de eje que especifica 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 para este eje.
<end_val>
Es un número que define el valor alto para este eje.
<opt_step>
[Opcional] Es 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 bien espaciadas.

 

Ejemplos

Descripción Ejemplo

En este ejemplo, se muestran los ejes Y izquierdo y derecho (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 especificado y se separan de forma uniforme dentro de ese rango. En el gráfico de líneas, los valores se extienden de manera uniforme a lo largo del eje X.

La dirección del eje se invierte para el eje r (índice 2), porque 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 los 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 personalizadas de los ejes chxl

Puedes especificar etiquetas de eje de string personalizadas en cualquier eje con el parámetro chxl. Puedes especificar tantas etiquetas como desees. 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.

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

Sintaxis

Especifica un conjunto de parámetros para cada eje que deseas 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_índice>
Eje al que se aplicarán las etiquetas. Este es un índice en el array de parámetros 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.
<label_1>| ... |<label_n>
Una o más etiquetas para colocar a lo largo de este eje. Pueden ser valores numéricos o de cadena; no es necesario que las cadenas 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 se separan de forma 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 que 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, enero, julio, enero, julio y enero en el eje X, y 2005, 2006 y 2007 debajo
chxt=x,y
chxl=
0:|Jan|Feb|March|April|May|
1:|Min|Mid|Max

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

Gráfico de líneas con 0 y 100 a la izquierda, A, B y C a la derecha, enero, julio, enero, julio y enero en el eje X, y 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 etiquetas de eje en los ejes Y izquierdo y derecho (y y r). También incluye dos conjuntos de valores para el eje x (x). Ten en cuenta las etiquetas vacías del conjunto del eje x inferior, que se usan para separar los valores.

En este ejemplo, se usan valores predeterminados para las etiquetas del eje del eje Y de la izquierda.

Gráfico de barras con 0 y 100 a la izquierda, A, B y C a la derecha, enero, julio, enero, julio y enero en el eje X, y 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 "estudiante"), usa la propiedad chxt para agregar un eje adicional en cada lado y, luego, usa chxl para agregar una sola etiqueta personalizada a cada lado y chxp para separarla 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 eje se mostrarán, ya sea con las etiquetas predeterminadas o las personalizadas especificadas con chxl. Si no especificas posiciones exactas con este parámetro, las etiquetas se espacará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 marca de verificación serán los valores predeterminados (por lo general, valores de datos o números de barras 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_índice>
Es el eje para el que especificas las posiciones. Este es un índice del array de parámetros 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 en el eje. Esta es una lista de valores numéricos separada 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 de ese eje. Ten en cuenta que este valor 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 del eje y o r, o 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 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 específicas.

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. Ten en cuenta que no tienes que espaciar las etiquetas de manera uniforme cuando usas chxp. Si no se especificara chxp aquí, la distancia del valor predeterminado 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 de ejes predeterminadas.
chxt=x,y
chxp no especificado

Volver al principio

Estilos de etiqueta de eje chxs

Puedes especificar el tamaño, el color y la alineación de la fuente para las etiquetas de ejes, tanto personalizadas como predeterminados. Todas las etiquetas en el 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 cadena de etiqueta, por ejemplo, para mostrar símbolos de moneda o ceros finales.

De forma predeterminada, los ejes inferior y superior no muestran las marcas de los valores, mientras que los ejes izquierdo y derecho sí las muestran.

Sintaxis

Los valores de varios ejes se deben separar 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>
El 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 (opcional): 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>: Texto literal que antecede a cada valor.
  • *...*: Es un bloque opcional unido a 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 estas opciones:
      • f: Es el formato de punto flotante (predeterminado). Considera especificar también la precisión con el valor <decimal_places>.
      • p: formato de porcentaje. Se agregará un signo % automáticamente. Nota: Cuando usas este formato, los valores de los datos entre 0.0 y 1.0 se asignan a 0 - 100% (por ejemplo, 0.43 se mostrará como 43%).
      • e: formato de notación científica.
      • c<CUR>: Aplica al número el formato de la moneda especificada con el marcador de moneda correspondiente. 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 ISO, aunque no todos los símbolos son compatibles.
    • <decimal_places>: Es un número entero que especifica cuántos decimales se mostrarán. El valor se redondea (no truncado) a esta longitud. El valor predeterminado es 2.
    • z: Muestra ceros finales. La configuración predeterminada es no.
    • s: Muestra separadores de grupo. La configuración predeterminada es no.
    • x o y: Muestran los datos de las coordenadas X o Y, según lo especificado. El significado de los datos 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>: Texto literal que sigue a cada valor.
<opt_label_color>
Es el color que se aplica al texto del eje (pero no al de la línea del eje), en formato hexadecimal RRRGGBB. El color de la línea del eje se especifica por separado con opt_axis_color. La configuración predeterminada es el 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 la etiqueta. En el caso de los ejes superior e inferior, esto describe cómo se alinea la etiqueta con la marca de verificación que está por encima o por debajo. Para los ejes izquierdo o derecho, esto 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 del eje 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 admitido en Google-o-meter] Indica si se deben mostrar marcas o líneas de eje para este eje. Las comillas simples y las líneas de los ejes solo están disponibles para los ejes más internos (por ejemplo, no se admiten para el exterior de dos ejes X). Usa uno de los siguientes valores:
  • l (“L” minúscula): Dibuja solo la línea del eje.
  • t: Dibuja solo marcas. Las marcas de tilde son las pequeñas líneas que están junto a las etiquetas de eje.
  • lt: [Predeterminado] Dibuja una línea de eje y las marcas de verificación de todas las etiquetas.
  • _: (guion bajo) no dibuja ninguna línea de eje ni marcas de verificación. Si deseas ocultar una línea de eje, usa este valor.
<tick_color>
[Opcional; no se admite en Google-o-meter] Es el color de la marca de verificación, en formato hexadecimal RRGGBB. La configuración predeterminada es el gris.
<opt_axis_color>
[Opcional] Es el color de esta línea del eje, en formato hexadecimal RRGGBB. La configuración predeterminada es el gris.

 

Ejemplos

Descripción Ejemplo

El tamaño y el color de la fuente se especifican para el segundo eje x (enero, febrero y mar).

Gráfico de líneas con el mínimo, el promedio y el máximo a la izquierda, 0, 1, 2, 3 y 4 a la derecha, del 0 al 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 las marcas de marca, pero no la línea de eje.

Gráfico de líneas en el que se muestran los números del 0 al 100 en el eje X; en el eje X, enero, febrero, marzo; el 0 al 4, en el eje Y; y marcas de verificación rojas con texto azul para el mínimo, el promedio y el máximo 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 eje, uno por serie. Cada conjunto de etiquetas se formatea con una cadena de formato personalizado, como se describe a continuación:

  • 0N*e,000000|
    • 0 significa la primera serie de datos.
    • N significa una cadena 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 cadena 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 debe usar.
    • * significa el final de los especificadores de formato.
    • Mil es una string literal que sigue a
    • FF0000 significa texto rojo.
  • 2N*sz2*,0000FF
    • 2 significa que la tercera serie
    • N significa una cadena de formato.
    • * significa el inicio de los especificadores de formato.
    • s significa mostrar especificadores de agrupación (en la configuración regional de inglés de EE.UU., que es una coma cada tres ceros).
    • z2 significa que se muestran dos ceros finales.
    • 0000FF significa texto azul.

Los rangos de etiquetas de eje se establecen usando el parámetro chxr (axis_index, start, end y step). Si no se hubiera establecido, habrían sido de 0 a 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 marca de verificación de eje chxtc

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

Los valores de varios ejes se deben separar 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>
El 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 proporciona más de un valor, las marcas de verificación del eje rotarán por 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 máximo valor positivo es 25. Los valores negativos se dibujan dentro del área del gráfico y se recortan según los bordes del área.

 

Ejemplos

Descripción Ejemplo

Ejemplo del uso de chxtc para crear marcas rojas largas. 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 al eje "r" (lado derecho) y los ejes X externos.
  • chxp=2,10,35,95: 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 etiqueta del eje r para el eje r: color y tamaño del texto, alineado a la izquierda y con marcas de verificación rojas.
  • chxtc=1,10|2,-180: Longitudes de las marcas del eje 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 de largo dentro del eje; el número negativo significa que la marca va dentro del eje y se recorta para ajustarse al gráfico.

Gráfico de líneas con 0 a 100 en el eje X, ene, feb y mar debajo, 0 a 4 en el eje Y, y marcas de verificación largas rojas con texto azul para el mínimo, el promedio y el 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 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

El fondo rellena chf [todos los gráficos]

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

Rellenos sólidos chf [Todos los gráficos]

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

Sintaxis

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

 

Ejemplos

Descripción Ejemplo

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

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

chf=bg,s,EFEFEF

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

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

chf=c,s,000000|
bg,s,EFEFEF

En este ejemplo, se aplica una transparencia del 50% a todo el gráfico (80 en hexadecimal es 128, o alrededor del 50% de transparencia). Observa el fondo de celda de la tabla que se muestra a través del gráfico.

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

chf=a,s,00000080

Volver al principio

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 de gradientes son fundidos de un color a otro. (Gráficos circulares de Google-o-Meter: solo fondo).

Cada relleno de gradiente especifica un ángulo y, luego, dos o más colores fijados 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 diferentes valores de <color_centerpoint> para que uno pueda difuminarse en el otro. Cada gradiente adicional se especifica con 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>: Rellenos de gradientes de barras (solo gráficos de barras). Reemplaza <index> por el índice de serie de las barras para rellenar con un gradiente. Consulta Colores de la serie del gráfico de barras para ver un ejemplo.
lg
Especifica un relleno de gradiente.
<angle>
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 para el color. El color comenzará a desvanecerse a partir de este punto a medida que se acerque a otro ancla. 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 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 se dibuja 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 abajo a la izquierda a arriba a la derecha), especificado con un ángulo de cuarenta y cinco grados (45).

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

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

El fondo del gráfico se dibuja en gris (EFEFEF).

Gráfico de líneas en gris oscuro con fondo gris pálido y área del gráfico en un gradiente lineal diagonal de blanco a azul desde abajo a la izquierda hasta arriba a la 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 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 durazno puro.

El fondo del gráfico se dibuja en gris (EFEFEF).

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

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

Volver al principio

 

Rellenos a rayas chf [Línea, Barra, Google-o-meter, Radar, Dispersión, Venn]

Puedes especificar un relleno de fondo a rayas para el área de tu gráfico o para todo el gráfico. (Gráficos circulares 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 del á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 la serie del gráfico de barras para ver un ejemplo.
ls
Especifica el relleno de franjas lineales.
<angle>
Es el ángulo de todas las rayas, en relación con el eje Y. Usa 0 para las rayas verticales o 90 para las horizontales.
<color>
Es el color de esta franja, en formato hexadecimal RRRGGBB. Repite los valores <color> y <width> para cada línea adicional. Debes tener al menos dos rayas. Las rayas se alternan hasta que se completa el gráfico.
<width>
El ancho de esta franja, de 0 a 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 rayas. Las rayas se alternan hasta que se completa el gráfico.

 

Ejemplos

Descripción Ejemplo
  • bg,ls,0: Relleno de franjas de fondo con rayas en un ángulo de cero grados con respecto al eje y (paralelo al eje Y). Las rayas cubren el fondo del gráfico y el área del trazado.
  • CCCCCC,0.15: La primera franja es gris oscuro, un 15% más ancha que 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 alternadas de izquierda a derecha
chf=
  bg,ls,0,
  CCCCCC,0.15,
  FFFFFF,0.1
  • c,ls,90: Área del gráfico con franjas horizontales en un ángulo de noventa grados desde el eje y. Las rayas cubren el área del diagrama, pero se omite el fondo del gráfico.
  • 999999,0.25: La primera franja es gris oscuro, un 25% más ancha que el gráfico.
  • CCCCCC,0.25: Es igual a la primera franja, pero es de un color gris más claro.
  • FFFFFF,0.25: Igual que la primera franja, pero blanca.
Gráfico de líneas azul con rayas gris oscuro, gris pálido, blanca y gris oscuro 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ínea, barra, radar, dispersión]

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

Este parámetro no te permite especificar el grosor ni el color de las líneas. Para conocer otras formas de crear líneas en tu gráfico, consulta los marcadores de forma (chm tipo h, H, v o V), los marcadores de rango (chm) y las marcas de marcas de ejes (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" e "y" se mostrarán en el gráfico. 100 / step_size = cuántas líneas de cuadrícula hay 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 línea punteada, en píxeles. El segundo parámetro es el espaciado entre 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: Es la cantidad de unidades, según la escala del gráfico, para desplazar las líneas de 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 gráficos muestra una línea de cuadrícula punteada de forma predeterminada.

Gráfico de líneas con 5 líneas de cuadrícula verticales y dos horizontales discontinuas de color gris pálido
chg=20,50
Gráfico de líneas con 5 líneas de cuadrícula verticales y dos horizontales discontinuas de color 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 de cuadrícula verticales y dos horizontales, gris pálido y punteadas
chg=20,50,1,5

Para mostrar 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 de cuadrícula verticales y dos horizontales de color gris pálido
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 de cuadrícula verticales y dos horizontales de color gris pálido
chg=20,50,3,3,10,20

Volver al principio

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

Puedes especificar el grosor de las líneas y un diseño sólido o discontinuo con el parámetro chls. Este parámetro solo se puede usar para aplicar diseño a gráficos de líneas o de radar. No se puede usar para diseñar líneas de gráficos compuestos, a menos que el tipo de base sea uno de líneas.

Sintaxis

Separa varios diseños de línea con el carácter de barra vertical ( |); el primer estilo 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 línea punteada, en píxeles. El segundo parámetro es el espaciado entre guiones, en píxeles. Para una línea continua, no especifiques ninguno de los valores. Si solo especificas <opt_dash_length>, entonces <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 sólida 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 son opcionales y se puede omitir cualquiera en la URL. Si deseas incluir varios marcadores, incluye varias cadenas 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 puedes 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 de ícono dinámico. Esta constante es casi la misma que el parámetro chst para los íconos independientes. Sin embargo, donde 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>
Los datos necesarios para este tipo de marcador en particular. Esto contiene la misma cadena que se usaría en un parámetro chld para un ícono independiente equivalente, excepto que todos los delimitadores | deben reemplazarse 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 ( @ ), igual ( = ), coma ( , ) y 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). Utiliza uno de los siguientes formatos:
  • n.d: Es el dato sobre el que se 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 a mitad de camino entre los puntos 3 y 4.
  • range,<start>,<end>,<step>: Dibuja un marcador en cada dato de paso en un rango de inicio a fin inclusive. El inicio y el fin son valores de índice y pueden ser números de punto flotante para indicar valores intermedios. Todos los valores son opcionales; las opciones predeterminadas son: start=0, end=last item, step=1. Si omites un valor, debes incluir las comas intermedias, pero no las 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, donde -1.0 es la parte inferior y 1.0 es la parte superior. Los elementos del gráfico (líneas y barras) se encuentran justo debajo de cero. Si dos marcadores tienen el mismo valor, se dibujan en el orden que establece la URL. El valor predeterminado es 0.0 (justo encima de los elementos del gráfico).
po=<x,y>
[Opcional] Posición absoluta en el gráfico en la que se debe dibujar el marcador. x e y son dos números de punto flotante, en los que 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] Cantidad de píxeles para desplazar el ícono de su posición normal. y_offset e 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 manera vertical y horizontal sobre el punto, lo que significa que es probable que este no se alinee con el marcador de datos. Un buen desplazamiento para un pin vertical es of=0,22; un buen desplazamiento para un pin 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


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 un marcador de ícono dinámico se centrará en el punto horizontal y vertical. Por lo tanto, si utilizas un ícono dinámico con una cola, esta no estará en el punto del gráfico, sino que lo estará 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.

El segundo gráfico utiliza 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 y dos marcadores individuales.

Observa cómo los pines verticales están desplazados en 0,22, y el inclinado tiene un desplazamiento de 12,20 para que los puntos 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 demuestra un marcador de texto de varias líneas. El marcador se debe desplazar después de agregar el texto, ya que la burbuja cambia de tamaño para adaptarse al texto y hacer que se vuelva a centrar en el gráfico. Ten en cuenta que las líneas nuevas del texto se indican con comas en la cadena 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 con 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. A continuación, se muestran ejemplos de ambos:

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

A continuación, se presentan las características específicas de los parámetros s=<icon_string_constant>;d=<marker_data_string>, tanto para los gráficos sin burbujas como para los gráficos integrados con burbujas (los parámetros mencionados anteriormente no se describen de nuevo 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 en burbujas] Qué parte del gráfico incorporado sin burbujas se fija al punto de datos. Elige una de las constantes de cadena de dos letras del siguiente diagrama:Cadenas de alineación
chart_data
Los datos del gráfico incorporado Es todo lo que aparece después de https://chart.googleapis.com/chart? en la URL del gráfico que se incorporará. Usa la herramienta que aparece a continuación o sigue las reglas que se indican debajo de ella.
frame_type
[Solo burbuja] Una de las constantes de estilo de marco de los íconos dinámicos.
padding
[Solo burbuja] Padding dentro de la burbuja, en píxeles.
frame_color
[Solo burbuja] Color del marco, como una cadena de color HTML de seis dígitos sin la marca #. Ejemplo: FF00FF.
fill_color
[Solo burbuja] Color de relleno de la burbuja, como una cadena de color HTML de seis dígitos sin el signo #. Ejemplo: FF00FF.

Datos de gráfico incorporados

Usa la siguiente herramienta de conversión para ayudarte a generar la cadena del gráfico, o bien genera la cadena de forma manual según las reglas que se establecen después de la herramienta.

Reglas para la conversión manual

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

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

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

Volver al principio

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

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

Puedes combinar los 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 siguiente línea inferior.
  • B: Rellena 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 final se indican con <start_line_index> y <end_line_index>.
<color>
Es un número hexadecimal de 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 1, y así sucesivamente.
<end_line_index>
  • Tipo de relleno "b": Indica la línea en la que se debe detener 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: Se ignora cualquier número en este parámetro y el relleno pasará de la línea especificada a la base del gráfico.
    • start:end: Para completar 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 están predeterminados en first_point:last_point. (Consulta el siguiente ejemplo).
<0>
Reservado (debe ser cero)

 

Ejemplos

Descripción Ejemplo

Si se trata de una sola serie, es más fácil usar chm=B. Esto cubrirá 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

Aquí hay un gráfico con dos líneas y dos rellenos. Para rellenar el área debajo de la línea inferior y por encima de la línea superior, se requiere una técnica especial, que se trata 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 completar 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 se dibujan en negro con chco.

Tres líneas en un gráfico; el gráfico está sombreado en verde desde la parte inferior hasta la primera línea, rojo desde la primera a la segunda línea, azul oscuro desde la segunda a la tercera línea 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 puntos de datos 0 a 3.
  • B,990000,0,7:10,0: Relleno vertical rojo debajo de la línea 0, vinculado por los puntos de 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 el uso de un relleno de línea 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 forma chm [Barra, línea, radar, dispersión]

Puedes especificar marcadores gráficos para todos los datos o para cada uno de ellos. 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 puntos de datos. Este tema se trata en la sección Marcadores de puntos 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 debe 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, no obtendrá ningún marcador.

Los marcadores de forma se comportan de manera ligeramente diferente en los gráficos 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 antecede 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, donde 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 que se creen dos series de datos, un valor para la parte inferior y el punto correspondiente de la segunda serie para la parte superior. También expone una sintaxis <size> extendida: line_thickness[:top_and_bottom_width], en la que top_and_bottom_width es opcional. Consulta los ejemplos que aparecen a continuación
  • h: Es una 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 <size> extendida que te permite especificar una longitud de línea exacta: line_thickness[:length], en la que :length es opcional y se establece de forma predeterminada en 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 la que :length es opcional y se establece de forma predeterminada en la altura del área completa del gráfico. El marcador se centra en el punto de datos.
  • x: Una X
<color>
Es el color de los marcadores de esta serie, en formato hexadecimal RRRGGBB.
<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 que especifican la ubicación por posición x/y (comienza con el carácter @). Puedes usar series de datos ocultos como fuente de marcadores. Consulta Gráficos compuestos para obtener más información. Los gráficos de barras verticales agrupadas admiten una sintaxis extendida especial para alinear marcadores con barras específicas.
<opt_which_points>
[Opcional] En qué puntos se deben dibujar los marcadores. La configuración predeterminada es "Todos los marcadores". Usa uno de los siguientes valores:
  • n.d: Indica dónde dibujar el marcador. El significado depende del tipo de marcador:
    • Todos los tipos excepto h: Es el punto de datos sobre el que se 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 a mitad de 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 y 1.0 es la parte superior.
  • -1: Dibuja un marcador en todos los datos. También puedes dejar este parámetro vacío para dibujar en todos los datos.
  • -n: dibuja un marcador en cada dato n-ésimo. Es un valor de punto flotante. Si n es menor que 1, el gráfico calculará los puntos intermedios adicionales por ti. Por ejemplo, -0.5 colocará el doble de marcadores que los datos.
  • start:end:n: Dibuja un marcador en cada dato n-ésimo de un rango, desde los valores de índice start hasta end inclusive. Todos los parámetros son opcionales (es posible que no estén), por lo que 3::1 estaría desde el cuarto elemento al último, el paso 1, y si se omite este parámetro por completo, 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 start y end son negativos, asegúrate de que aparezcan en valores crecientes (por ejemplo, -6:-1:1). Si el valor del paso n es menor que 1, se calcularán datos adicionales mediante la interpolación de 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. No es necesario que este punto esté en una línea. Agrega el carácter @ antes del tipo de marcador para utilizar esta opción. Especifica las coordenadas como valores de punto flotante, en el que 0:0 es la esquina inferior izquierda del gráfico y 1:1 es la esquina superior derecha. Por ejemplo, para agregar un diamante rojo de 15 píxeles en el centro de un gráfico, usa @d,FF0000,0,0.5:0.5,15.
<size>
El tamaño del marcador en píxeles. La mayoría toma un valor numérico único para este parámetro. Los marcadores V, H y S admiten la sintaxis <size>[:width], en la que la segunda parte opcional especifica la línea o la longitud 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, donde -1.0 es la parte inferior y 1.0 es la parte superior. Los elementos del gráfico (líneas y barras) son solo inferiores a cero. Si dos marcadores tienen el mismo valor, se dibujan en el orden que establece 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 cadena 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: Deja este campo 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 de los 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: Diamante 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, 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 un punto, primera serie, séptimo punto, un píxel de ancho.
  • V,3399CC,0,7.0,1.0: Línea vertical inferior a 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: Es la línea horizontal amarilla del ancho del gráfico en el punto de datos 9.
  • h,FF0000,0,0.5,1: Línea horizontal roja en la altura designada, primera serie, a la mitad del gráfico, de 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.

Si dos o más marcadores ocupan el mismo punto, se dibujan en el orden en que aparecen en el parámetro chm. En este caso, el círculo es el primer marcador que se especifica con chm, por lo que se dibuja primero. El diamante se especifica y se dibuja en segundo lugar, lo que hace que se dibuje sobre el 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 diamantes de píxeles. Se dibuja un diamante en el punto 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 punto de datos (-2 significa cada dos puntos).

Gráfico de líneas con marcador cada segundo punto
chd=t:
  0,20,20,50,40,70,70,90,85,45,40,50
chm=
  o,0066FF,0,-2,6
Este es un gráfico de líneas con el doble de marcadores que los datos (-0.5 significa cada medio punto). Gráfico de líneas con marcador cada 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 marcador cada segundo punto
chm=
  h,76A4FB,0,0:1:.2,2,-1|
  V,76A4FB,0,::2,0.5,-1

En este gráfico, se agregan líneas de relleno verticales a un gráfico de líneas:

  • v: Líneas verticales en el gráfico
  • FF0000 - Líneas rojas
  • 0 - Índice de la 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 marcador cada 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 trazado 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 fijada 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: Es una barra de error negra con líneas de ancho de 1 píxel y barras inferiores y superiores de 20 píxeles de largo. La parte inferior está anclada a la serie 0 punto 8, la parte superior está anclada a la serie 1 punto 8.
  • H,990066,1,2,5:50: Línea horizontal púrpura 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,7,5:50%,990066,1,9,5:50%,990066,17:9:50%
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 datos y texto chm [barras, líneas, radares, dispersión]

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

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

Nota sobre los valores de cadena: Solo se permiten caracteres seguros para URL en las cadenas de etiquetas. Para estar seguro, debes codificar en formato URL 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 debe 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, 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 con codificación de URL personalizada. Para escapar las comas en los marcadores de texto, coloca la coma antes de ella con \. Ejemplo: fHello\,+World!
  • t<text>: Es un marcador de texto simple. Especifica el carácter “t” seguido del texto codificado para URL personalizada. Para escapar las comas en los marcadores de texto, coloca la coma antes de ella con \. Ejemplo: tHello\,+World!
  • A<text>: Es un marcador de anotación. Es similar a un marcador de marca, pero coordinará su posición para que no se superpongan. El único formato válido para <opt_which_points> es n.d, que indica el índice de un punto de la serie.
  • N<formatting_string>: Es el valor de los datos actuales, con formato opcional. Si no usas el parámetro chds (ajuste de escala personalizado), se obtiene el valor codificado exacto. Si usas ese parámetro con cualquier tipo de formato, el valor se escalará al rango que especifiques. A continuación, puedes ver un ejemplo de chds con marcadores numéricos. Con este tipo de marcador en un gráfico de barras apiladas, si especificas -1 para <series_index>, obtendrás un marcador que muestra la suma de todos los valores de esta barra apilada. La sintaxis de la cadena de formato es la siguiente:
           <preceding_text>*<number_type><decimal_places>zs<x or y>*<following_text>.
    Todos estos elementos son opcionales. A continuación, se explica el significado de cada elemento:
    • <preceding_text>: Es el texto que antecede a cada valor.
    • *...*: Es un bloque opcional unido a 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 estas opciones:
        • f: Es el formato de punto flotante (predeterminado). Considera especificar también la precisión con el valor <decimal_places>.
        • p: formato de porcentaje. Se agregará un signo % automáticamente. Nota: Cuando usas este formato, los valores de los datos entre 0.0 y 1.0 se asignan a 0 - 100% (por ejemplo, 0.43 se mostrará como 43%).
        • e: formato de notación científica.
        • c<CUR>: Aplica al número el formato de la moneda especificada con el marcador de moneda correspondiente. 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 ISO, aunque no todos los símbolos se admiten.
      • <decimal_places>: Es un número entero que especifica cuántos decimales se mostrarán. El valor se redondea (no truncado) a esta longitud. El valor predeterminado es 2.
      • z: Muestra ceros finales. La configuración predeterminada es no.
      • s: Muestra separadores de grupo. La configuración predeterminada es no.
      • x o y: Muestran los datos de las coordenadas X o Y, según lo especificado. El significado de los datos 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>: Texto que sigue cada valor.
<color>
: Es el color de los marcadores de este conjunto, en formato hexadecimal RRRGGBB.
<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 datos), puedes especificar -1 para crear un marcador de valor sumado para cada pila de barras. Consulta a continuación un ejemplo.
<opt_which_points>
[Opcional] En qué puntos se deben dibujar los marcadores. La configuración predeterminada es Todos los marcadores. Usa uno de los siguientes valores:
  • n.d: Es el dato sobre 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 que está a mitad de camino entre los puntos 3 y 4.
  • -1: Dibuja un marcador en todos los datos. También puedes dejar este parámetro vacío para dibujar en todos los datos.
  • -n: dibuja un marcador en cada dato n-ésimo.
  • start:end:n: Dibuja un marcador en cada dato n-ésimo de un rango, desde los valores de índice start hasta end inclusive. Todos los parámetros son opcionales (es posible que no estén), por lo que 3::1 estaría desde el cuarto elemento al último, el paso 1, y si se omite este parámetro por completo, 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 start y end son negativos, asegúrate de que aparezcan en valores crecientes (por ejemplo, -6:-1:1). Si el valor del paso n es menor que 1, se calcularán los datos adicionales mediante la interpolación de 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. No es necesario que este punto esté en una línea. Para utilizar esta opción, agrega el carácter arroba (@) antes del tipo de marcador. Especifica las coordenadas como valores de punto flotante, en el que 0:0 es la esquina inferior izquierda del gráfico, 0.5:0.5 es el centro y 1:1 es la esquina superior derecha del gráfico. Por ejemplo, para agregar un diamante rojo de 15 píxeles en el centro de un gráfico, usa @d,FF0000,0,0.5:0.5,15.
<size>
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), este valor se escalará según el rango de datos. Por lo tanto, si el rango de datos es de 0 a 100 y <size> es 30, un valor de datos de 100 sería 30 píxeles de ancho, un valor de datos de 50 sería 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, donde -1.0 es la parte inferior y 1.0 es la parte superior. Los elementos del gráfico (líneas y barras) son solo inferiores a cero. Si dos marcadores tienen el mismo valor, se dibujan en el orden que establece la URL. El valor predeterminado es 0.0 (justo por encima de los elementos del gráfico).
<opt_placement>
[Opcional] Son los detalles adicionales de la posición que describen dónde colocar este marcador en relación con el punto de datos. Puedes especificar la posición relativa horizontal o vertical, así como las compensaciones. 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 cadena 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 contrario a la justificación, de manera que un anclaje izquierdo en realidad coloca el marcador a la derecha del dato. Puedes elegir un justificador horizontal o vertical de la siguiente lista:
  • Posición horizontal: “l”, “h” o “r”. Esta opción sirve para fijar objetos a la izquierda, en el centro o a la derecha, de forma horizontal. La configuración predeterminada es "l".
  • Posición vertical: “b”, “v”, “t”. Anclado inferior, medio o superior, de forma vertical. La configuración predeterminada es "b".
  • Posición relativa de barras [solo gráficos de barras]: “s”, “c”, “e”: Base, centro o parte superior de una barra. En el caso de los gráficos apilados, esto es relativo a 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), está en relación 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 un desplazamiento horizontal para este marcador, en píxeles. El valor predeterminado es 0.
vertical_offset
Es un desplazamiento vertical para este marcador, en píxeles. Valor predeterminado del gráfico que no es de barras: 15; gráfico de barras predeterminado: 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 en forma de porcentaje, redondeados a cero decimales, en negro, en todos los valores, en texto de 11 puntos. Ten en cuenta que los valores de los datos están todos entre 0.0 y 1.0, que, en formato de porcentaje, se mueven hacia arriba de dos decimales.

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

Gráfico de barras con etiquetas de porcentajes 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 en euros sobre 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, incluidas la codificación simple y extendida. Esto no afectará el tamaño de la barra ni las etiquetas del eje, 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 y 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, de modo que los valores de los marcadores se ajustan a este rango, pero las alturas de la barra no se ven afectadas (si esto fueran datos de formato de texto, también se ajustarían las barras).


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 pt y una bandera con texto rojo de 15 pt, dibujada en los 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 de barras apiladas con valores para series individuales, además del total de la serie. Para mostrar los valores de la serie apilada, debemos usar la opción de posicionamiento "c". Si no lo hicieran, el valor de la barra superior se superpondrá con el valor de 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
Algunas demostraciones más 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, un ancla superior lo hace 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, fijado 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 anotaciones ajustan automáticamente la posición de la etiqueta 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 las ciudades en Suiza.

Volver al principio

Marcadores de rango chm [barra, vela, línea, radar, dispersión]

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

Puedes combinar cualquier marcador chm mediante un carácter de barra vertical ( |) para separar los conjuntos de parámetros 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; por lo tanto, el último rango dibujado se dibujará sobre los rangos 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 en formato RRGGBB.
0
Reservado (debe ser cero)
<start_point>
Es la posición inicial del rango.
  • En el caso de los marcadores de rango horizontales, 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 verticales, es una posición en el eje x, donde 0.00 es la izquierda del gráfico y 1.00 es la derecha del gráfico.
<end_point>
La posición final del rango.
  • En el caso de los marcadores de rango horizontales, 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 verticales, es una posición en el eje x, donde 0.00 es la izquierda del gráfico y 1.00 es la derecha del gráfico.

 

Ejemplos

Descripción Ejemplo

Los marcadores de rango pueden ser una línea fina o una banda de color.

  • r,E5ECF9,0,0.75,0.25: Marcador de rango, azul pálido, (reservado); 0.5 de la altura del gráfico.
  • r,000000,0,0.1,0.11: Marcador de rango, negro, (reservado), comienza en el punto 0.1 del eje y hacia arriba y finaliza en el punto 0.11 del punto hacia arriba del eje Y (una línea negra fina).
Gráfico de líneas con una banda horizontal azul pálido que se extiende del 25% al 75% desde el eje Y hacia arriba y una línea horizontal delgada al diez por ciento desde 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 azul pálido (A0BAE9).

Gráfico de líneas con una banda vertical azul pálido que se extiende del 25% al 75% a lo largo del eje X y una línea vertical delgada al 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 que el marcador horizontal azul pálido.

Gráfico de líneas con una banda vertical azul y una horizontal azul pálido que se extiende del 25% al 75% del eje x e y, respectivamente. Línea roja vertical delgada y línea negra horizontal fina, diez por ciento del recorrido a lo largo del eje x e y, 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

El siguiente es un ejemplo de un gráfico de líneas que usa marcadores de rango para dibujar líneas horizontales débiles 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 espaciadas en partes iguales
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 velas chm=F [Barra, línea]

Los marcadores de velas indican la varianza y el cambio de dirección en una serie de datos. A menudo, se usan para mostrar los valores de las acciones durante el transcurso de un día. El marcador incluye segmentos que muestran los valores altos y bajos, así como los valores de apertura y cierre para un período específico (por lo general, un día). Obtén más información sobre los marcadores de velas aquí.

Un marcador de vela se dibuja como un rectángulo dividido por una línea vertical. Se requieren cuatro series de datos para dibujar un marcador de velas. Esto es lo que especifica cada serie:

  • Las serie 1 y 4 especifican la parte inferior y superior de la línea vertical, respectivamente. Suelen representar los valores bajos y altos del día.
  • Las serie 2 y 3 especifican los bordes verticales del rectángulo. La serie 2 es el valor de apertura y la serie 3 es el valor de cierre. El color del rectángulo depende de cuál sea mayor: cuando el valor de apertura (serie 2) es menor que el valor de cierre (serie 3), el precio aumentó y el rectángulo se llena con verde sólido de forma predeterminada. Cuando el valor de apertura (serie 2) es mayor que el valor de cierre (serie 3), el precio disminuye y el rectángulo se rellena de rojo continuo de forma predeterminada. Solo puedes especificar un color de relleno para el rectángulo con valor decreciente. Cuando especificas eso, el rectángulo con el valor creciente queda vacío (vacío). Ten en cuenta que la serie 2 puede aparecer en la parte superior o inferior del rectángulo, dependiendo de si el precio aumentó o bajó.

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

Nota: Si no quieres que aparezcan en el gráfico las líneas de los datos usados para dibujar los marcadores, debes incluir un 0 después del tipo de formato. Por ejemplo: chd=t0:10,20,30,40 en una cadena de datos de formato de texto. Consulta Gráficos compuestos para obtener más información.

Aquí hay un ejemplo que muestra las líneas para cada serie:

Sintaxis

chm=
  F,<opt_declining_color>,<data_series_index>,<opt_which_points>,<width>,<opt_z_order>
F
Indica que este es un marcador de vela.
<opt_declining_color>
[Opcional] Color de relleno de los rectángulos cuando el valor disminuye (cuando el valor de la serie 2 es > valor de la serie 3 correspondiente). Este es un número hexadecimal de formato RRGGBB. Cuando los valores aumenten, el rectángulo estará vacío. El valor predeterminado es verde continuo para el aumento y rojo continuo para disminuir (no puedes especificar un color de relleno personalizado para valores mayores).
<data_series_index>
Es el índice de la serie de datos que se usará como la primera serie para los marcadores de velas. Este es un índice basado en cero. Por lo tanto, si especificas 1 aquí y tienes seis series, la segunda, tercera, cuarta y quinta se usarán para dibujar marcadores de velas.
<opt_which_points>
[Opcional] Especifica qué datos se usan para dibujar marcadores. La configuración predeterminada es Todos los marcadores. Usa uno de los siguientes formatos:
  • n.d: Dibuja un marcador en un solo punto de la serie, donde n.d es el índice del punto en 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 a mitad de camino entre los puntos 3 y 4.
  • -1: Dibuja un marcador en todos los datos. También puedes dejar este parámetro vacío para dibujar en todos los marcadores.
  • -n: dibuja un marcador en cada dato n-ésimo.
  • start:end:n: Dibuja un marcador en cada dato n-ésimo de un rango, desde los valores de índice start hasta end inclusive. Todos los parámetros son opcionales (es posible que no estén), por lo que 3::1 estaría desde el cuarto elemento al último, el paso 1, y si se omite este parámetro por completo, 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 start y end son negativos, asegúrate de que aparezcan en valores crecientes (por ejemplo, -6:-1:1). Si el valor del paso n es menor que 1, se calcularán los datos adicionales mediante la interpolación de los valores de datos proporcionados. Los valores predeterminados son first:last:1
<ancho>
El ancho de todos los rectángulos, 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, donde -1.0 es la parte inferior y 1.0 es la parte superior. Los elementos del gráfico (líneas y barras) son solo inferiores a cero. Si dos marcadores tienen el mismo valor, se dibujan en el orden que establece 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 marcadores de velas en un gráfico de líneas con cuatro series. Se especifica el color de relleno personalizado 0000FF (azul), y este color se usa para rellenar los rectángulos cuando el punto de la serie 3 es más pequeño que el punto equivalente de la serie 2.

El gráfico corta el primer y el último rectángulo. A fin de eliminar estos valores, puedes especificar 1:4 para el cuarto parámetro de chm.

Observa el cero en la cadena de datos para ocultar las líneas de la serie: chd=t0. Esto indica que todos los datos del gráfico se usarán para los marcadores.

El parámetro <which_point> está en blanco, lo que dibuja velas en todos los datos.

Gráfico de líneas con cuatro líneas naranjas y cuatro marcadores financieros

chd=t0:
  0, 5,10, 7,12, 6|
  35,25,45,47,24,46|
  15,40,30,27,39,54|
  70,55,63,59,80,60
chm=F,0000FF,0,,20

Este es un ejemplo del mismo gráfico en el que se usan los colores predeterminados y se quita el primer y el último elemento.

Este es un gráfico compuesto: es una combinación de un gráfico de líneas (el tipo de gráfico base) y marcadores de velas. El valor de 1 en cht=t:1 significa que todas las series de datos posteriores a la primera deben ocultarse del tipo de gráfico básico (gráfico de líneas). El primer 1 en chm=F,,1,1:4,20 significa que los datos de las velas provienen de las series 2, 3, 4 y 5 (el 1 se basa en cero). Consulta Gráficos compuestos si deseas obtener más información para dibujar uno como este.

Gráfico de líneas con una línea naranja y cuatro marcadores financieros.
cht=lc
chm=
  F,,1,1:4,20

chd=t1:
  15,40,30,27,39,54|
  ...

Volver al principio

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

Puedes agregar una línea que realice un seguimiento de los datos en tu gráfico. En la mayoría de los casos, 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 se puede 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 se trata de 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 serie de datos, y así sucesivamente.
<which_points>
Qué puntos de una serie 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 el último dato, respectivamente. start y end pueden ser negativos, como índices inversos del último valor. Si start y end son negativos, asegúrate de escribirlos en un 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, donde -1.0 es la parte inferior y 1.0 es la parte superior. Los elementos del gráfico (líneas y barras) son solo inferiores a cero. Si dos marcadores tienen el mismo valor, se dibujan en el orden que establece la URL. El valor predeterminado es 0.0 (justo encima de los elementos del gráfico).

 

Ejemplos

Descripción Ejemplo

A continuación, se muestra 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. Los gráficos compuestos se dibujan agregando series de datos adicionales al parámetro chd, además de un valor a chd que le indica al gráfico que "ignora" la serie de datos adicional.

Consulta los 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 chd los gráficos]

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

  • Una serie de datos de chd: los datos se extraen de la serie especificada en chd.
  • Un rango de valores declarados en el parámetro chfd. Debes declarar un valor de inicio, detención 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 para generar resultados a la misma serie de datos, las funciones se ejecutarán en el orden establecido, pero solo se trazará el resultado de la función final. Ten en cuenta que puedes encadenar funciones, de modo que una función pueda tomar como entrada una serie que generó una función anterior.

Para asignar colores o marcadores chm a una línea de función, asigna los colores o marcadores al índice de serie de la función. Ten en cuenta que los marcadores se colocan de acuerdo con los datos después de que la función los manipuló.

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 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 representarán. Los datos pueden pertenecer a un rango que definas o a una de las series de datos de chd. Puedes especificar múltiples variables para cada función con un delimitador (;) en varias variables. Ten en cuenta que si defines muchas variables para una sola función y estas tienen una cantidad de puntos diferente, la función se detendrá cuando alcance el primer extremo. Por ejemplo, si una función define tanto x=1-5 paso 1 como 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: Es un nombre de string arbitrario para la variable. Úsala en la función definida por function_string.
  • input_series_index: Es el índice de una serie de datos chd que se usará como datos de entrada.
  • inicio: El valor inicial numérico de un rango.
  • end: Valor final numérico de un rango.
  • paso: El valor numérico del paso desde inicio hasta el final. 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 y 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 trazarán en el gráfico a menos que los especifiques en function_string. Cuanto más pequeño sea el paso, más suave 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. No se admiten las funciones de resumen muParser (min, max sum, avg). 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 ficticia 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 en 0.1. Se asigna a la primera serie, lo que significa que obtendrá el primer color de la serie (FF0000). La función aplicada a x es sen(x) * 50 + 50. Observa que 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 funcionales y no funcionales.

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

Observa la ubicación de los marcadores en el resultado de la función; los datos se calculan desde start, end y step, por lo que si tu rango es de 0 a 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 que usa chfd, otra que usa chd 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, utiliza un gráfico lxy, asigna dos series ficticias y asigna 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 de 0 a 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 de 0 a 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. ¡Te atrapará!



Volver al principio