Fórmulas matemáticas

Puedes generar una imagen que muestre una fórmula matemática con el lenguaje TeX.

Descripción general

Puedes generar una imagen de una fórmula matemática con el lenguaje TeX (que se pronuncia "tek" o "tecnología"). Esto resulta útil para mostrar fórmulas complejas en la página web. Estos son algunos ejemplos de fórmulas renderizadas en el momento:

Ecuación cuadrática

Copia y pega las URLs de las imágenes en un navegador para ver la URL que genera cada imagen.

Especifica tu fórmula con el lenguaje TeX en la propiedad src mediante una etiqueta <img>. La fórmula se mostrará como un archivo PNG. O, si lo prefieres, puedes enviar una solicitud GET de manera programática para recuperar una fórmula PNG.

Sintaxis

URL raíz: https://chart.googleapis.com/chart?

Las solicitudes de imágenes de fórmula admiten los siguientes parámetros de consulta de URL después del signo ? en la URL raíz:

Parámetro de URL Obligatorio u opcional Descripción
cht=tx Obligatorio Especifica que se trata de una imagen de tipo de fórmula.
chl=<data> Obligatorio La fórmula para renderizar, en lenguaje TeX. Debes codificar la fórmula como URL. Para obtener más detalles, consulta la siguiente información.
chs=<width>x<height> Opcional Tamaño de la imagen en píxeles. Si no especificas esto, el tamaño se calculará automáticamente. Si especificas un solo valor, será la altura y el ancho se calculará por ti.
chf Opcional Se admiten todos los tipos de relleno de fondo. Consulta Rellenos de fondo.
chco Opcional Especifica el color del texto. El color predeterminado es negro.

Codifica en formato URL los datos de chl

Recuerda que debes codificar en formato URL todos los caracteres que no sean seguros para URL que se usen en tu fórmula. Puedes encontrar un codificador de URL aquí.

El error más común es usar + en una fórmula en lugar de %2B, como se muestra aquí:

Sin codificación URL Codificado en URL
a^2 + b^2 = c^2
cht=tx&chl=a^2+b^2=c^2
a^2 + b^2 = c^2
cht=tx&chl=a^2%2Bb^2=c^2

Rellenos de fondo (chf)

Puedes especificar rellenos sólidos, gradientes o a rayas para la imagen. Todos los rellenos se especifican con un parámetro chf, y puedes mezclar diferentes tipos de relleno (sólidos, rayas y gradientes) en la misma imagen si separas los valores con el carácter de barra vertical ( | ).

Rellenos sólidos

Puedes especificar un relleno de color sólido, con o sin transparencia, o hacer que toda la imagen sea transparente.

Sintaxis

chf=<fill_type>,s,<color>|...
<fill_type>.
Especifica uno de los siguientes valores:
  • bg: Relleno de fondo. El fondo puede ser transparente si especificas un valor alfa en el parámetro <color>.
  • a: Transparencia de la imagen. Se ignoran los primeros seis dígitos de <color> y solo se aplican los últimos dos (el valor de transparencia).
s
Especifica un relleno sólido.
<color>
El color de relleno, en formato hexadecimal RRGGBB[AA], en el que AA es un valor de transparencia opcional (alfa).

 

Ejemplos

Descripción Ejemplo

Una fórmula con un fondo azul

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

chf=bg,s,0000EF

Igual que lo anterior, pero el fondo es ligeramente transparente mediante el uso de dos dígitos alfa, el 80, que corresponde a una transparencia de aproximadamente el 50%. Observa que el fondo de la fórmula es transparente, pero no el texto.

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

chf=bg,s,0000EF80

En este ejemplo, se aplica una transparencia a toda la imagen. Observa cómo se ve el fondo de la celda de la tabla a lo largo del texto y el fondo. La imagen combina dos fondos con un carácter de barra vertical:

  • a,s,00000080: Aplica una transparencia a toda la imagen.
  • bg,s,0000EF: Aplica un fondo azul. El fondo también se vuelve transparente gracias al parámetro anterior.

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

chf=a,s,00000080|
  bg,s,0000EF

Volver al principio

Rellenos de gradientes

Puedes aplicar uno o más rellenos gradientes a la fórmula. Los rellenos gradientes son atenuaciones de un color a otro.

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

Sintaxis

chf=bg,lg,<angle>,<color_1>,<color_centerpoint_1>
    ,...,
  <color_n>,<color_centerpoint_n>
bg
Relleno de fondo
lg
Especifica un relleno de gradientes.
<ángulo>
Es un número que especifica el ángulo del gradiente de 0 (horizontal) a 90 (vertical).
<color>
Es el color del relleno, en formato hexadecimal RRGGBB.
<color_centerpoint>
Especifica el punto de anclaje del color. El color comenzará a desvanecerse a partir de este punto a medida que se acerque a otro anclaje. El rango de valores va de 0.0 (borde inferior o izquierdo) a 1.0 (borde superior o derecho), inclinado en el ángulo especificado por <angle>.

 

Ejemplos

Descripción Ejemplo

La fórmula tiene un gradiente lineal horizontal, especificado con un ángulo de cero grados (0).

  • chf=bg,lg: Define un relleno de gradientes.
  • 0: Inclinación de cero grados
  • FFE7C6,0: Gradiente de color durazno centrado en el lado izquierdo (posición 0)
  • 76A4FB,1: Es un gradiente de color azul centrado en el lado derecho (posición 1.0).

Durazno/gradiente de azul a cero grados

chf=bg,lg,0,FFE7C6,0,76A4FB,1

Igual que lo anterior, pero con un gradiente de 45 grados.

Durazno/gradiente de azul a 45 grados

chf=bg,lg,45,FFE7C6,076A4FB,1

Volver al principio

Rellenos con rayas

Puedes especificar un relleno de fondo a rayas para la fórmula.

Sintaxis

chf=
  bg,ls,<angle>,<color_1>,<width_1>
    ,...,
  <color_n>,<width_n>
bg
Relleno de fondo
ls
Especifica un relleno de franja lineal.
<ángulo>
El ángulo de todas las rayas, en relación con el eje Y. Usa 0 para rayas verticales o 90 para rayas horizontales.
<color>
Es el color de esta franja, en formato hexadecimal RRGGBB. Repite <color> y <width> para cada franja adicional. Debes tener al menos dos franjas. Las rayas se alternan hasta que se completa la imagen.
<width>
El ancho de esta franja, desde 0 hasta 1, donde 1 es el ancho completo de la imagen. Las rayas se repiten hasta que la imagen se completa. Repite los valores <color> y <width> para cada franja adicional. Debes tener al menos dos franjas. Las rayas se alternan hasta que se completa la imagen.

 

Ejemplos

Descripción Ejemplo
  • bg,ls,0: Franjas de fondo en un ángulo de cero grados con respecto al eje y (paralelas al eje Y).
  • CCCCCC,0.15: La primera franja es de color gris oscuro, es decir, un 15% más ancha que la imagen.
  • FFFFFF,0.1: La segunda franja es blanca, un 10% más ancha que la imagen.
Fórmula con rayas verticales
chf=bg,ls,0,CCCCCC,0.15,FFFFFF,0.1
  • c,ls,90: Franjas de fondo en un ángulo de noventa grados con respecto al eje Y.
  • 999999,0.25: La primera franja es gris oscuro, es un 25% más ancha que la imagen.
  • CCCCCC,0.25: Igual que la primera franja, pero de un gris más claro.
  • FFFFFF,0.25: Igual que la primera franja, pero blanco.
Fórmula con rayas horizontales
chf=bg,ls,90,999999,0.25,CCCCCC,0.25,FFFFFF,0.25

Volver al principio