Figuras
Introducción
Este contenido ofrece una guía completa sobre el trabajo con figuras en los documentos Quarto, que incluye:
- Inclusión de figuras básicas y personalización del tamaño mediante atributos de anchura y altura.
- Mejora de las figuras con enlaces, títulos, alineaciones, texto alternativo y funciones de lightbox para ampliarlas.
- Referencia cruzada de figuras dentro del texto para una documentación coherente.
- Organizar las figuras en grupos, paneles o múltiples filas/columnas para una presentación estructurada.
- Ajustar la ubicación de los títulos y crear composiciones complejas para una disposición visual detallada.
- Gestión de figuras generadas por bloques de código ejecutables con opciones de trozo específicas para ID, leyenda, alineación y tamaño.
- Utilización del atributo
layout
para las figuras estáticas y computacionales con el fin de conseguir la disposición visual deseada. - Utilización de técnicas de diseño de bloques para estructurar eficazmente el contenido en formatos de varias columnas.
Cada sección ofrece ejemplos de sintaxis y consejos prácticos para una gestión eficaz de las figuras en la documentación, lo que la convierte en un recurso esencial para mejorar los elementos visuales de su contenido.
Conceptos básicos
Incluir una figura:
![Elefante](elephant.png)
Tamaño de las figuras
Especifique los atributos width
y height
para cambiar el tamaño de la figura, por ejemplo:
# Utilizar medidas convencionales
![Elefante](elephant.png){width=300}
# O use porcentaje
![Elefante](elephant.png){width=80%}
# O usar pulgadas
![Elefante](elephant.png){width=4in}
La altura se calculará automáticamente si sólo especifica width
.
Figuras enlazadas
[![Elefante](elephant.png)](https://en.wikipedia.org/wiki/Elefante)
Título, alineación y texto Alt de la figura
![Elefante](elephant.png "Title: Un elefante"){fig-align="left" fig-alt="Dibujo de un elefante." width=20%}
Figuras de Lightbox
Permite a los usuarios hacer clic en una figura para verla ampliada.
Incluya la clase lightbox
en los atributos de la figura:
![Un elefante](elephant.png){.lightbox}
Salida:
Referencias cruzadas
Las referencias cruzadas pueden hacerse tanto para las figuras estáticas como para las computacionales.
Figuras Markdown
- Añada el prefijo
fig-
a los ID de figura para referencias cruzadas. - Figuras de referencia con el prefijo
@
:
![Un elefante](elephant.png){#fig-elephant}
Véase @fig-elephant.
Salida:
![](images/elephant.png)
Véase Figura 1.
Figuras del código
Incluya un prefijo fig-
en la label
para referenciarla:
Para ver una demostración de un gráfico de líneas, consulte @fig-line-plot.
```{python}
#| label: fig-line-plot
#| fig-cap: "Un gráfico de líneas "
import matplotlib.pyplot as plt
plt.plot([1,23,2,4])
plt.show()
```
Sintaxis Div
Para hacer referencias cruzadas a una figura utilizando la sintaxis div, la imagen va seguida del pie de foto dentro del div:
Para las figuras, envuelva la imagen y el pie de foto en un div prefijado
fig-
:::: {#fig-elephant} ![](elephant.png) Un elefante :::
Haga referencia a figuras de código ejecutable encerrando el código en un div similar:
::: {#fig-line-plot} ```{python} import matplotlib.pyplot as plt plt.plot([1,23,2,4]) plt.show() ``` Un gráfico de líneas :::
Referencia a figuras con @fig-
. Para referenciar también el código, utilice opciones de trozos de código en lugar de la sintaxis div: véase Referencias cruzadas para bloques de código ejecutables
Subfiguras
Columnas múltiples
Puede agrupar figuras relacionadas en un div con un título principal. Utilice layout-ncol=2
para las imágenes de lado a lado, asegurando un espaciado adecuado:
::: {#fig-elephants layout-ncol=2}
![Surus](surus.png){#fig-surus}
![Hanno](hanno.png){#fig-hanno}
Elefantes famosos :::
Paneles de figuras
Omitir los identificadores #fig
en las figuras sin título principal:
::: {layout-ncol=2}![Surus](surus.png)
![Hanno](hanno.png)
:::
Excluya por completo los pies de foto incluyendo sólo imágenes:
::: {layout-ncol=2}![](surus.png)
![](hanno.png)
:::
Filas múltiples
Utilice layout-nrow
para especificar el número de filas:
::: {layout-nrow=2}![Surus](surus.png)
![Hanno](hanno.png)
![Abdul Abbas](abdul-abbas.png)
![Lin Wang](lin-wang.png)
:::
Ubicación de los subtítulos
- La ubicación por defecto es debajo de la figura.
- Utilizar
fig-cap-location
in the document header (yaml
section) to change the location totop
,bottom
, ormargin
:
---
fig-cap-location: top
---
Diseños personalizados
Utilice el atributo layout
para diseños complejos, como dos figuras del mismo tamaño en la primera fila y una sola imagen en la segunda fila.
[1,1], [1]]"}
::: {layout="[![Surus](surus.png)
![Hanno](hanno.png)
![Lin Wang](lin-wang.png)
:::
- El atributo
layout
utiliza una matriz 2D para definir filas y columnas. "layout="[[1,1], [1]]"
significa dos filas: la primera con dos columnas iguales y la segunda con una columna.
Defina columnas que ocupen distintos porcentajes de anchura de la fila:
[70,30], [100]]"}
::: {layout="[![Surus](surus.png)
![Hanno](hanno.png)
![Lin Wang](lin-wang.png)
:::
Utilice valores negativos para crear espacio entre elementos:
[40,-20,40], [100]]"}
::: {layout="[![Surus](surus.png)
![Hanno](hanno.png)
![Lin Wang](lin-wang.png)
:::
Alineación vertical
Controle la alineación vertical mediante el atributo layout-valign
:
[15,-2,10]" layout-valign="bottom"}
::: {layout="![Surus](surus.png)
![Lin Wang](lin-wang.png)
:::
Tenga en cuenta que la alineación vertical no se limita a las imágenes, también puede alinear verticalmente cualquier otro elemento que se incluya en un panel.
Cómputos
- Utilizar las opciones chunk
label
,fig-cap
, yfig-link
para ID, caption, y link respectivamente. - Utilice las opciones
fig-align
yfig-alt
para la alineación y el texto alternativo, respectivamente. - Ajuste el tamaño por defecto de las figuras con
fig-width
yfig-height
en la cabecera del documento. - Más información en la sección Opciones de ejecución: Opciones de figura.
Disposición
Los atributos de maquetación también sirven para las figuras producidas por bloques de código ejecutables. He aquí ejemplos para ambos casos Jupyter
and Knitr
:
```{python}
#| layout-ncol: 2
#| fig-cap:
#| - "Line Plot 1"
#| - "Line Plot 2"
import matplotlib.pyplot as plt
plt.plot([1,23,2,4])
plt.show()
plt.plot([8,65,23,90])
plt.show()
```
```{r}
#| layout-ncol: 2
#| fig-cap:
#| - "Velocidad y distancias de frenado de los coches"
#| - "Presión de vapor del mercurio en función de la temperatura"
plot(cars)
plot(pressure)
```
Observe que en estos ejemplos también utilizamos la opción fig-cap
para aplicar una leyenda a cada una de las figuras generadas.
Subtítulos
- Crear subtítulos para la salida computacional combinando las opciones
fig-cap
yfig-subcap
. - Incluir opcionalmente una
label
con el prefijofig-
. En este caso, la figura estará numerada y se podrán hacer referencias cruzadas.
```{python}
#| label: fig-charts
#| fig-cap: "Gráficos"
#| fig-subcap:
#| - "First"
#| - "Second"
#| layout-ncol: 2
import matplotlib.pyplot as plt
plt.plot([1,23,2,4])
plt.show()
plt.plot([8,65,23,90])
plt.show()
```
```{r}
#| label: fig-charts
#| fig-cap: "Gráficos"
#| fig-subcap:
#| - "Coches"
#| - "Presión"
#| layout-ncol: 2
plot(cars)
plot(pressure)
```
Disposición personalizada
El layout
funciona de la misma manera para las figuras producidas por Knitr o Jupyter. Por ejemplo, aquí hay un fragmento de código Rmd que produce 3 gráficos y define un diseño personalizado para ellos:
```{r}
#| layout: [[45,-10, 45], [100]]
plot(cars)
plot(pressure)
plot(mtcars)
```
Disposición de bloques
Contenido de los bloques con títulos:
::: {layout-ncol=2}### Lista uno
- ìtem A
- ìtem B
- ìtem C
### Lista dos
- ìtem X
- ìtem Y
- ìtem Z
:::
Lista uno
- ìtem A
- ìtem B
- ìtem C
Lista dos
- ìtem X
- ìtem Y
- ìtem Z
Contenido del bloque sin títulos:
::: {layout-ncol=2}- ìtem X
- ìtem Y
- ìtem Z
Este es un párrafo que aparece a la derecha (segunda columna). :::
- ìtem X
- ìtem Y
- ìtem Z
Este es un párrafo que aparece a la derecha (segunda columna).
Utilice divs (:::
) para dividir contenidos complicados en bloques para la maquetación:
[ 40, 60 ]"}
:::: {layout="
::: {#first-column}```r
# Algún código
print("Hello World")
```
Texto que debe mostrarse debajo del código.
:::
::: {#second-column}![](elephant.png)
:::
::::
Los atributos id (#first-column
y #second-column
) son opcionales, pero facilitan la lectura.
# Algún código
print("Hello World")
Texto que debe mostrarse debajo del código.