Gráficos compuestos

  

Funciones específicas de los gráficos

  1. Descripción general
  2. Cómo crear un gráfico compuesto
  3. Tipos de gráficos
    1. Gráficos de marcadores de líneas
    2. Gráficos de velas
    3. Gráficos de cajas
    4. Gráficos incorporados

Información del marcador

  1. Line Markers (Marcadores de líneas) (chm=D)
  2. Marcadores de formas (chm)
  3. Candlestick Markers (chm=F) [Marcadores de velas]

 

Descripción general

Puedes combinar varios tipos de gráficos con marcadores de líneas o velas para destacar tendencias de datos o mostrar varianzas. Cuando agregas marcadores de líneas o de velas a gráficos de barras, de dispersión o de otros tipos, el gráfico resultante se denomina gráfico compuesto. Algunos gráficos compuestos parecen una combinación de dos tipos de gráficos, por ejemplo, un gráfico de barras con una línea de seguimiento:

Gráfico de barras con línea de seguimiento

mientras que otros se ven como tipos de gráficos completamente nuevos, por ejemplo, un gráfico de cajas:

gráfico de cajas.

Cómo crear un gráfico compuesto

Todos los gráficos compuestos constan de uno o más tipos de gráficos base (de líneas, dispersión, barras o radar) combinados con uno o más conjuntos de marcadores. Estos marcadores requieren datos para colocarlos en el gráfico. En ocasiones, puedes usar la misma serie de datos que usaste para dibujar las barras o los puntos en tu gráfico, pero, por lo general, querrás que los marcadores tengan sus propios conjuntos de datos independientes. Si deseas que tu gráfico tenga diferentes series de datos para el gráfico base y para los marcadores, debes ocultar los datos de los marcadores del gráfico base (de modo que no intente dibujar más barras o líneas con esos datos). A continuación, le indicamos cómo hacerlo:

  1. Agrega la serie de datos de tus marcadores al final del parámetro chd. Por ejemplo, si tu gráfico de barras tuviera datos chd=t:30,10,20, podrías agregar datos nuevos para un marcador de línea como este: chd=t:30,10,20|60,40,50.
  2. Oculta los datos adicionales de los marcadores del gráfico base. Si simplemente agregaras una serie de datos adicional a un gráfico de barras para tu línea de seguimiento, el gráfico la mostraría como una serie de barras nueva. Para evitarlo, debes ocultar esta serie adicional. Para ocultar una serie, incluye un solo dígito después del descriptor de formato chd; por ejemplo, chd=t1:30,10,20|60,40,50. Este dígito le indica a la API de Chart cuántas series de datos usar a fin de dibujar elementos para ese tipo de gráfico base lo define el parámetro cht (barras para gráficos de barras, datos para gráficos de líneas, etcétera). Cualquier serie de datos adicional será ignorada por ese tipo de gráfico cuando se dibuje el gráfico. Ten en cuenta que este es un número basado en 1, no en 0. Por lo tanto, t1 significa "usar solo la primera serie de datos para las barras", t2 significa "usar solo las dos primeras series para las barras", etcétera.
    1. Notas:
      1. Gráficos de dispersión: Los diagramas de dispersión ocultan datos de una manera diferente; consulta la documentación para obtener más detalles.
      2. Gráficos de líneas lxy: Especifica un número par de series para mostrar (t0, t2, t4, etcétera). Esto se debe a que cada línea de un gráfico de lxy se describe con dos series de datos: una para los valores x y otra para los valores y.
  3. Usa la serie de datos ocultos para dibujar marcadores de vela, marcadores de línea o cualquier otro marcador. En las secciones vinculadas, se explica cómo dibujar marcadores. Haz referencia a la serie de datos ocultos como la fuente de tus marcadores. Puedes incluir tantas series de datos ocultos adicionales como desees y usarlas como marcadores de gráfico adicionales.

Este es el gráfico que acabamos de describir:

Gráfico de barras con marcador de línea
cht=bvg
chd=t1:30,10,20|60,40,50
chm=D,0033FF,1,0,5,1

 

Tipos de gráficos

A continuación, se incluye una lista de los tipos de marcadores y los tipos de gráficos con los que se pueden utilizar:

Tipo de marcador Tipos de gráficos base compatibles
Line Línea, Dispersión, Barra y Radar
Candelero Línea, Barra
Todos los demás Línea, Dispersión, Barra y Radar

Estos son algunos ejemplos de los tipos de gráficos compuestos que puedes crear:

Tipo de gráfico Descripción Ejemplo
Gráficos de marcadores de líneas Los marcadores de línea se pueden usar para mostrar tendencias en muchos otros tipos de gráficos. Gráfico de barras con marcador de líneaGráfico de barras con marcador de línea
Gráficos de velas Los gráficos de velas se utilizan a menudo para mostrar datos financieros. Gráfico de líneas con una línea naranja y cuatro marcadores financieros.
Gráficos de cajas

Los gráficos de cajas se utilizan para mostrar los datos agrupados en cuartiles de rango.

Gráfico de líneas con una línea naranja y cuatro marcadores financieros.
Gráficos incorporados Puedes incorporar un gráfico dentro de otro gráfico. Gráfico incorporado
Otros marcadores Puedes ocultar los datos de los marcadores en cualquiera de los tipos de gráficos base aceptables y usarlos con cualquier otro tipo de marcadores que desees.
chd=t1:
  10,20,30,40,50,60,70,80
  5,10,15,20,25,30,35,40,45,50
chm=o,000000,1,-1,5

Volver al principio

 

Gráficos de marcadores de líneas

Puedes agregar líneas a los gráficos de líneas, scatter, barras o radar para destacar tendencias.

Tipo de base y tipo de marcador Descripción Ejemplo
Barra + línea

Este es un gráfico de barras con una línea de seguimiento. Las primeras dos series de datos se usan para las barras apiladas y la serie restante se usa para la línea. chd=s2 indica que el gráfico debe usar solo las dos primeras series para las barras. La línea usa la tercera serie para sus datos.

  • chd=s2:1XQbnf4,EWoQMUB,9halxp9: Codificación simple, en la que las dos primeras series se usan para dibujar las barras y la última se usa para la línea.
  • chm=D,0033FF,2,0,5,1: Línea de seguimiento (D), azul, datos del índice de serie 2, todos los puntos (0), la línea tiene 5 píxeles de ancho y tiene un orden z de 1.
Gráfico de barras con marcador de línea
chm=
  D,0033FF,2,0,5,1
chd=s2:
  1XQbnf4,
  EWoQMUB,
  9halxp9
Dispersión + línea Puedes agregar una línea a un gráfico de dispersión para mostrar promedios. Ten en cuenta que los diagramas de dispersión ocultan los datos de los marcadores de una manera diferente. Consulta Gráficos de dispersión para obtener más información.
chd=t:
  12,16,16,24,26,28,41,51,66,68,13,45,81|
  16,14,22,34,22,31,31,48,71,64,15,38,84
chm=
  o,0000FF,0,-1,0|
  o,FF0000,0,0:9:,5|
  D,000000,1,10:,1,-1
Barra + línea

Este es otro gráfico de barras apiladas con una línea independiente dibujada sobre él.

Gráfico de barras con marcador de línea
cht=bvs
chd=t2:
  0,10,20,30,20,70,80|
  0,20,10,5,20,30,10|
  10,0,20,15,60,40,30
chm=D,76A4FB,2,0,3
Barra y círculos Igual que el gráfico anterior, pero con marcadores de círculo en lugar de un marcador de línea. Especificamos cada valor de datos de 0.5, lo que suma los puntos intermedios calculados en la línea punteada. Gráfico de barras con marcador de línea
cht=bvs
chd=t2:
  0,10,20,30,20,70,80|
  0,20,10,5,20,30,10|
  10,0,20,15,60,40,30
chm=o,76A4FB,2,-.5,10

Volver al principio

 

Gráficos de velas

Los gráficos de velas requieren al menos cuatro series de datos para dibujar las velas, además de series adicionales para cualquier otro elemento del gráfico. Los gráficos de velas solo pueden mostrar un conjunto de marcadores de velas o pueden ser una combinación de estos marcadores y gráficos de barras o líneas, como se muestra a continuación:

Tipo de base y tipo de marcador Descripción Ejemplo
Línea (oculta) + Candelero

En este ejemplo, se muestra un gráfico que incluye solo los marcadores de las velas.

  • chd=t0: El valor 0 significa que todas las series de datos están ocultas del tipo de gráfico básico (en este caso, un gráfico de líneas), por lo que solo se dibujan las velas. El primer y el último valor de cada serie son -1 para indicar valores faltantes a fin de evitar dibujar la primera o la última vela, que se superpondría con el eje o el margen del gráfico y estaría cortada.
  • chm=F,0000FF,0,-1,20: F indica los marcadores de velas (originalmente "marcadores financieros"), 0000FF significa que los marcadores son de color azul cuando el valor disminuye; 0 indica que los datos de las velas comienzan en la serie 0; -1 indica los marcadores en todos los puntos (también podríamos especificar 0:4 aquí para ocultar el primer y el último vela en lugar de usar valores de datos -1). 20 es el ancho de la vela.
Gráfico de velas básico
cht=lc
chd=t0:
  -1,5,10,7,12,-1|
  -1,25,45,47,24,-1|
  -1,40,30,27,39,-1|
  -1,55,63,59,80,-1
chm=F,0000FF,0,-1,20
Línea + Candelero

Este es un ejemplo de un gráfico de líneas con marcadores de velas.

Se proporcionan cinco series de datos: la primera se usa para el tipo de gráfico (línea) y las series de datos "ocultas" restantes se usan para los marcadores de velas. El parámetro chd=t1 especifica que solo se utiliza la primera serie para ese tipo de gráfico (gráfico de líneas).

Omitimos el primer y el último marcador de vela mediante 1:4 en el valor <which_points> porque la primera y la última vela se recortan según los bordes del área del gráfico.

El parámetro chm especifica los marcadores de vela con la sintaxis F,<declining_color>,<data_series_index>,<which_points>,<width>,<order>.

Gráfico de líneas con una línea naranja y cuatro marcadores financieros.
cht=lc
chd=t1:
  20,10,15,25,17,30|
  0,5,10,7,12,6|
  35,25,45,47,24,46|
  15,40,30,27,39,54|
  70,55,63,59,80,6
chm=
  F,,1,1:4,20

Línea + Candelero

Otro ejemplo de un gráfico de velas, pero con colores de relleno personalizados.

Gráfico de barras con marcador de línea
chd=t1:
t1:
  90,80,70,50,40,30,20,10|
  0,5,10,0,5,10,0|2,15,20,5,15,40,0|
  5,35,20,2,35,20,0|
  15,40,30,15,40,50,0
chm=
  F,000000,1,1:-2,20
Bar + vela

Este es un ejemplo de un gráfico de barras con marcadores de velas.

Aquí mostramos el primer y el último marcador de vela, ya que las barras agregan suficiente espaciado para evitar que los límites del gráfico los recorten.

Gráfico de líneas con una línea naranja y cuatro marcadores financieros.
cht=bvg
chd=t1:
  20,10,15,25,17,30|
  0,5,10,7,12,6|
  35,25,45,47,24,46|
  15,40,30,27,39,54|
  70,55,63,59,80,6
chm=
  F,,1,1:4,20

Volver al principio

 

Gráficos de cajas

Los gráficos de caja, también llamados diagramas de caja o gráficos de cajas y bigotes, son un tipo de gráfico que muestra la agrupación de una o más series en cuartiles (los cuartiles son grupos que abarcan el 25% del rango de valores, con la posible excepción de los valores atípicos). Los gráficos de cuadros son similares a los gráficos de velas, pero con marcadores agregados para la parte inferior y superior de las velas, además de un marcador del percentil 50.

Los gráficos de cajas están compuestos por todos los marcadores, como se muestra a continuación:

Marcador de vela
chm=
  F,0000FF,0,1,10
Marcador de vela
chm=
  H,0000FF,0,1,1:10|
  H,0000FF,3,1,1:10|
  H,0000FF,4,1,1:10
Marcador de vela
chm=
  o,FF0000,5,,5|
  o,FF0000,6,,5
Marcador de vela
Un conjunto de marcadores de vela (chm=F) para el cuerpo de las cajas: Un conjunto de marcadores de forma de línea horizontal de longitud ajustable (chm=H) para las líneas percentiles mínimas, 50 y 100: De manera opcional, algunos marcadores de forma de círculo (chm=o) para mostrar valores atípicos en el conjunto de datos Si los combinas, obtendrás un gráfico de cajas.

El tipo de gráfico base para los gráficos de cuadros es cualquiera de los tipos de gráfico de barras (bhs, bvs, bhg y bvg) o los tipos de gráfico de líneas (lc, ls, lxy). Pero si ocultas el tipo de gráfico base agregando un cero en el parámetro de formato de datos (por ejemplo: chd=t0: o chd=s0:), no importa qué tipo de gráfico elijas.

Un gráfico de caja debe tener al menos cinco series de datos: cuatro para los cuadros y los marcadores máximos y mínimos; uno para el marcador de 50% y cualquier serie de datos adicional para los marcadores adicionales que desees, como los marcadores de valores atípicos. A continuación, se muestra el orden recomendado para la serie. Ten en cuenta que, si el valor de la serie 1 es mayor que el valor correspondiente de la serie 2, el cuadro se completará con el color de marcador chm=F. Si el valor de la serie 1 es menor que el de la serie 2, el cuadro quedará vacío. Consulta el artículo Marcadores de velas para obtener más información.

Pedido en serie para una caja sin completar:

  1. Valor mínimo
  2. Marcador del 25% (75% para el cuadro relleno)
  3. 75% de marcador (25% para un cuadro relleno)
  4. Valor máximo
  5. Marcador 50%
  6. Las series seis y las posteriores son para datos adicionales de marcadores, como valores atípicos.

Puedes colocar la serie adicional de marcadores antes o después de los datos de los marcadores de la vela, pero es más fácil colocarlos todos al final.

Puedes crear diferentes estilos de gráficos de cajas si especificas distintos marcadores o tipos de gráficos base, o bien ordenas los datos de manera diferente.

Descripción Ejemplo

Este es un gráfico de caja estándar, pero con diferentes colores asignados a los distintos elementos del gráfico a fin de destacar el marcador que se usa para crear cada elemento del gráfico.

  • cht=bvs: El tipo de gráfico base es bvs, pero no se muestra ninguna barra de este gráfico base. Podríamos haber especificado cualquier tipo de gráfico compuesto aquí.
  • chd=t0: La t0 oculta todas las líneas de este gráfico de líneas. Todos los datos se usarán únicamente para los marcadores. En los datos, el primer y el último valor son -1 para evitar tener marcadores que se superpongan con los bordes izquierdo y derecho del gráfico. Todos los valores de la segunda serie son menores que los valores correspondientes de la tercera serie, por lo que todos los cuadros están vacíos.
    • -1,5,10,7,12,-1: Valor mínimo; el punto inferior de las barras naranjas inferiores; también la altura de las líneas verdes horizontales.
    • -1,25,30,27,24,-1-Valor del 25%: Borde horizontal inferior de los cuadros naranjas.
    • -1,40,45,47,39,-1-Valor del 75%: Borde horizontal superior de las cajas naranjas.
    • -1,55,63,59,80,-1: Valor máximo: el punto superior de las barras naranjas superiores; también la altura de las líneas horizontales azules.
    • -1,30,40,35,30,-1: Líneas "medianas" horizontales de color negro dentro de los velas.
    • -1,-1,5,70,90,-1: Datos de valores atípicos (círculos rojos)
    • -1,-1,-1,80,5,-1: Más datos de valores atípicos (círculos rojos). Los datos de valores atípicos se dividen en dos conjuntos porque no puedes tener dos marcadores, uno encima del otro, especificados en la misma serie sin usar desplazamientos ni otros trucos complicados.
  • chm= - Datos del marcador, como se describe a continuación:
    • F,FF9900,0,1:4,40: Marcadores de velas naranjas (F) que usan cuatro series de datos que comienzan en la primera serie (0), en los puntos 1 a 4, tamaño 40.
    • H,0CBF0B,0,1:4,1:20: Son marcadores de línea horizontal verdes que muestran el valor mínimo. Estas provienen de la primera serie.
    • H,0000FF,3,1:4,1:20: Son marcadores de línea horizontal azules que muestran el valor máximo. Estos provienen de la serie 3.
    • H,000000,4,1:4,1:40: Son marcadores de línea horizontal negras que muestran el valor del 50%. Estos provienen de la serie 4.
    • o,FF0000,5,-1,7: Círculos rojos asignados a la sexta serie de datos para valores atípicos. Los marcadores se asignan a todos los elementos de esta serie, que utiliza -1 para las cajas sin un valor atípico.
    • o,FF0000,6,-1,7: Más valores atípicos. Se requiere otra serie de datos cuando quieres apilar valores atípicos unos sobre otros en el mismo cuadro.

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

cht=bvs
chd=t0:
  -1,5,10,7,12,-1|
  -1,25,30,27,24,-1|
  -1,40,45,47,39,-1|
  -1,55,63,59,80,-1|
  -1,30,40,35,30,-1|
  -1,-1,5,70,90,-1|
  -1,-1,-1,80,5,-1
chm=
  F,FF9900,0,1:4,40|
  H,0CBF0B,0,1:4,1:20|
  H,000000,4,1:4,1:40|
  H,0000FF,3,1:4,1:20|
  o,FF0000,5,-1,7|
  o,FF0000,6,-1,7

El tipo de gráfico de lc siempre mostrará las líneas de los ejes. Para crear un gráfico sin líneas de ejes, especifica un tipo de gráfico de ls.
Tipo de gráfico que muestra los bordes
  cht=lc
El tipo de gráfico ls no muestra bordes.
   cht=ls
Para crear un cuadro relleno, haz que el punto de la segunda serie sea mayor que el punto correspondiente de la tercera serie. El valor más grande está marcado en rojo en el código que se muestra a la derecha. Gráfico de barras verticales con dos conjuntos de datos: un conjunto de datos está color azul oscuro y el segundo está apilado en azul pálido
chd=t0:
  -1,5,10,7,12,-1
  -1,40,30,27,24,-1
  -1,25,45,47,39,-1
  -1,55,63,59,80,-1

Volver al principio

 

Gráficos incorporados

Gráfico circular incorporado en un gráfico de líneas

Puedes incorporar cualquier tipo de gráfico dentro de un gráfico de barras, líneas, radar o scatter mediante íconos dinámicos. Consulta la sección Gráficos incorporados de la documentación sobre marcadores de íconos dinámicos (chem).

Volver al principio

 

Funciones estándares

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

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

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

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

Sintaxis

chm=
  D,<color>,<series_index>,<which_points>,<width>,<opt_z_order>
D
Indica que es un marcador de línea.
<color>
Es el color de la línea, en formato hexadecimal RRGGBB.
<series_index>
Es el índice de la serie de datos que se usa para trazar la línea. El índice de la serie de datos es 0 para la primera serie de datos, 1 para la segunda, y así sucesivamente.
<which_points>
Cuáles son los puntos de una serie que se deben usar para trazar la línea Usa uno de los siguientes valores:
  • 0: Usa todos los puntos de la serie.
  • start:end: Usa un rango específico de puntos en la serie, desde el inicio hasta el final inclusive (índice basado en cero). También puedes usar valores de punto flotante para especificar puntos intermedios o dejar start o end en blanco para indicar el primer o último dato, respectivamente. Los valores de start y end pueden ser negativos, como un índice inverso del último valor. Si tanto start como end son negativos, asegúrate de escribirlos en valor creciente (por ejemplo, -6:-1).
<size>
Es el ancho de la línea en píxeles.
<opt_z_order>
[Opcional] Es la capa en la que se dibuja el marcador en comparación con otros marcadores y todos los demás elementos del gráfico. Este es un número de punto flotante de -1.0 a 1.0 inclusive, en el que -1.0 es la parte inferior y 1.0 es la parte superior. Los elementos del gráfico (líneas y barras) son un poco más bajos que cero. Si dos marcadores tienen el mismo valor, se dibujan en el orden especificado por la URL. El valor predeterminado es 0.0 (justo encima de los elementos del gráfico).

 

Ejemplos

Descripción Ejemplo

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

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

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

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

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

Volver al principio

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

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

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

Sintaxis

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

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

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

 

Ejemplos

Descripción Ejemplo

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

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

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

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

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

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

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

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

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

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

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

Volver al principio

Marcadores de velas chm=F [Barra, línea]

Los marcadores de vela 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 alto y bajo, así como los valores de apertura y cierre de un período específico (por lo general, un día). Para obtener más información sobre los marcadores de velas, consulta aquí.

Un marcador de candelabro se dibuja como un rectángulo dividido por una línea vertical. Se requieren cuatro series de datos para dibujar un marcador de vela. A continuación, se indica lo que especifica cada serie:

  • Series 1 y 4 especifican la parte inferior y superior de la línea vertical, respectivamente. Por lo general, estos representan los valores bajo y alto del día.
  • Series 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 es más alto: cuando el valor de apertura (serie 2) es menor que el valor de cierre (serie 3), el precio aumenta y el rectángulo se llena de verde sólido de forma predeterminada. Cuando el valor de apertura (serie 2) es superior al valor de cierre (serie 3), el precio desciende y el rectángulo se llena de color rojo sólido de forma predeterminada. Solo puedes especificar un color de relleno para el rectángulo con valor decreciente. Cuando lo especifiques, el rectángulo con el valor creciente quedará vacío (vacío). Ten en cuenta que la serie 2 puede ser la parte superior o inferior del rectángulo, en función de si el precio aumentó o bajó.

Puedes combinar marcadores de vela 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 utilizados para dibujar los marcadores, debes incluir un 0 después del tipo de formato. Por ejemplo: chd=t0:10,20,30,40 en una string de datos de formato de texto. Consulta Gráficos compuestos para obtener más información.

A continuación, se incluye un ejemplo que muestra las líneas de 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] Es el color de relleno de los rectángulos cuando el valor disminuye (cuando el valor de la serie 2 es mayor que el valor de la serie 3 correspondiente). Es un número hexadecimal en formato RRGGBB. Cuando los valores aumenten, el rectángulo estará vacío. El valor predeterminado es verde continuo para aumentar, y rojo continuo para disminuir (no puedes especificar un color de relleno personalizado para valores crecientes).
<data_series_index>
Es el índice de la serie de datos que se usará como la primera serie para tus 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 vela.
<opt_which_points>
[Opcional] Especifica qué datos se usan para dibujar marcadores. La opció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 de la serie. Si especificas un valor que no es un número entero, la fracción indica un punto intermedio calculado. Por ejemplo, 3.5 significa la mitad del camino entre los puntos 3 y 4.
  • -1: Dibuja un marcador en todos los puntos de datos. También puedes dejar este parámetro vacío para dibujar en todos los marcadores.
  • -n: Dibuja un marcador en cada punto de datos n.
  • start:end:n: Dibuja un marcador en cada dato n de un rango, desde los valores de índice start hasta end, inclusive. Todos los parámetros son opcionales (pueden estar ausentes), por lo que 3::1 sería del cuarto elemento al último, paso 1, y si se omite por completo este parámetro, el valor predeterminado será first:last:1. Todos los valores pueden ser números de punto flotante. start y end pueden ser negativos para contar hacia atrás desde el último valor. Si tanto start como end son negativos, asegúrate de que se incluyan en valor creciente (por ejemplo, -6:-1:1). Si el valor del paso n es menor que 1, calculará puntos de datos adicionales interpolando los valores de datos proporcionados. Los valores predeterminados son first:last:1
<ancho>
Es 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, en el que -1.0 es la parte inferior y 1.0 es la parte superior. Los elementos del gráfico (líneas y barras) son un poco más bajos que cero. Si dos marcadores tienen el mismo valor, se dibujan en el orden especificado por la URL. El valor predeterminado es 0.0 (justo encima de los elementos del gráfico).

 

Ejemplos

Descripción Ejemplo

A continuación, se incluye 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), que 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 recorta el primer y el último rectángulo. Si quieres eliminar estos valores, puedes especificar 1:4 para el cuarto parámetro de chm.

Observa el cero en la string 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 genera 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 quitan 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 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 para obtener más información sobre cómo dibujar un gráfico compuesto 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