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 (se pronuncia "tek" o "tech"). Esto resulta útil para mostrar fórmulas complejas en tu página web. Estos son algunos ejemplos de fórmulas procesadas sobre la marcha:

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 y una etiqueta <img>, y la fórmula se mostrará como un archivo PNG. Si lo prefieres, también puedes enviar una solicitud GET de manera programática para recuperar un archivo PNG de fórmula.

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 el idioma TeX. Debe codificar la fórmula en formato URL; consulte a continuación los detalles.
chs=<width>x<height> Opcional Tamaño de la imagen en píxeles Si no especificas esta opción, el tamaño se calculará automáticamente. Si especificas un solo valor, este 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 el negro.

Codificación URL de los datos de chl

Recuerda que debes codificar en formato URL todos los caracteres que no sean seguros para URL que se usen en la 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 a continuación:

Sin codificación URL Codificado para 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, con 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, gradientes) en la misma imagen separando 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 volverse 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 dos últimos (el valor de transparencia).
s
Especifica un relleno sólido.
<color>
Es 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 negro.

chf=bg,s,0000EF

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

Gráfico de líneas rojo con un área del gráfico negra y 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 través del texto y del fondo. En la imagen, se combinan 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 de gradientes a la fórmula. Los rellenos de gradientes son fundidos de un color a otro.

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=bg,lg,<angle>,<color_1>,<color_centerpoint_1>
    ,...,
  <color_n>,<color_centerpoint_n>
bg
Relleno de fondo
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

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

  • chf=bg,lg: Define un relleno de gradiente.
  • 0: Inclinación de cero grados
  • FFE7C6,0: Gradiente de color durazno centrado en el lado izquierdo (posición 0)
  • 76A4FB,1: Es el 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 el ejemplo 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 a 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 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 RRGGBB. Repite los valores <color> y <width> para cada línea adicional. Debes tener al menos dos rayas. Las rayas se alternan hasta que se rellena la imagen.
<width>
Es el ancho de esta franja, de 0 a 1, donde 1 es el ancho completo de la imagen. Las rayas se repiten hasta que se rellena la imagen. Repite los valores <color> y <width> para cada franja adicional. Debes tener al menos dos rayas. Las rayas se alternan hasta que se rellena la imagen.

 

Ejemplos

Descripción Ejemplo
  • bg,ls,0: Son 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 gris oscuro, un 15% más ancha que la imagen.
  • FFFFFF,0.1: La segunda franja es blanca, un 10% del ancho que la imagen.
Fórmula con rayas verticales
chf=bg,ls,0,CCCCCC,0.15,FFFFFF,0.1
  • c,ls,90: Son franjas de fondo en un ángulo de noventa grados respecto del eje Y.
  • 999999,0.25: La primera franja es gris oscuro, un 25% más ancha que la imagen.
  • 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.
Fórmula con rayas horizontales
chf=bg,ls,90,999999,0.25,CCCCCC,0.25,FFFFFF,0.25

Volver al principio