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:
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 |
---|---|
cht=tx&chl=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 |
|
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. |
|
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:
|
|
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 (
|
|
Igual que lo anterior, pero con un gradiente de 45 grados. |
|
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 o90
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
hasta1
, donde1
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 |
---|---|
|
chf=bg,ls,0,CCCCCC,0.15,FFFFFF,0.1 |
|
chf=bg,ls,90,999999,0.25,CCCCCC,0.25,FFFFFF,0.25 |