Пронумерованные подписи к настраиваемым и реактивным фигурам в HTML-файле R markdown

В последние годы появилась возможность добавить нумерацию к подписи к рисункам на фрагментах R в html_document2, как указано в онлайн-тексте Ихуи Се для резервирование. Однако было сложнее сохранить эту нумерацию при одновременном выводе пользовательских цифр из этих фрагментов. Например, попытка создания пользовательских фигур с помощью CSS flexbox из интерактивного текста Карсона Сиверта.

Есть несколько других тем, в которых обсуждается нумерация цифр HTML Rmd и использование hooks или счетчики CSS для добавления настраиваемой нумерации. Однако мне не удалось найти решение, позволяющее сохранить индивидуальную фигуру, а также html_document2 нумерацию.

В приведенном ниже примере я хочу, чтобы расположенные рядом графические изображения реагировали на размер экрана, но также имели те же заголовок и нумерацию рисунка.

---
output: 
  bookdown::html_document2:
    self-contained: TRUE
---

```{css, echo=FALSE}
#dualpanel {
  width: 50%
}

@media screen and (max-width: 500px) {
  #dualpanel {
    width: 100%
  }}
```
```{r chunk1, echo=FALSE, htmlcap='FIRST FIGURE CAP'}
temp <- plotly::plot_ly(mtcars, x = ~cyl, y=~mpg)
shiny::div(class = 'figure',
  style = "display: flex; flex-wrap: wrap; justify-content: center",
  shiny::div(temp, id = 'dualpanel'), 
  shiny::div(temp, id = 'dualpanel'))
```

```{r chunk2,  echo=FALSE, fig.cap='SECOND FIGURE CAP'}
plot(mtcars$cyl, mtcars$mpg)
```

Это создает такой вывод:

введите описание изображения здесь


r r-markdown knitr
person al-obrien    schedule 22.06.2020    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Чтобы решить эту проблему, важно знать, что knitr использует #fig: label в pandoc для создания автоматической нумерации в выходных данных. Вы можете увидеть это, когда изучите временные выходные данные уценки в процессе вязания:

<div class="figure">
<img src="web_tiles_v2_files/figure-html/otherchunk-1.png" alt="SECOND FIGURE CAP"  />
<p class="caption">(\#fig:SPECIFICCHUNKOFINTEREST)SECOND FIGURE CAP</p>
</div>

Таким образом, вы должны иметь возможность поддерживать вывод индивидуальной фигуры, настраивая специальный крючок, который можно увидеть в других решениях. Это будет выглядеть следующим образом, просто убедитесь, что у вас есть правильная метка чанка:

```{r}
knit_hooks$set(customcap= function(before, options, envir) {
  if(!before) {
    paste('<p class="caption"> (\\#fig:chunk1)',options$customcap,"</p>",sep="")
    }
    })
```

Можно также использовать некоторые внутренние knitr функции для автоматического захвата fig.lp и label: paste('<p class="caption">', knitr:::create_label(options$fig.lp, options$label), options$customcap,"</p>", sep="")

Весь код будет выглядеть так:

---
output: 
  bookdown::html_document2:
    self-contained: TRUE
---

```{css, echo=FALSE}
#dualpanel {
  width: 50%
}

@media screen and (max-width: 500px) {
  #dualpanel {
    width: 100%
}}
```

```{r}
knit_hooks$set(customcap= function(before, options, envir) {
  if(!before) {
    paste('<p class="caption"> (\\#fig:chunk1)',options$customcap,"</p>",sep="")
    }
    })
```


```{r chunk1, echo=FALSE, customcap='FIRST FIGURE CAP'}
temp <- plotly::plot_ly(mtcars, x = ~cyl, y=~mpg)
shiny::div(class = 'figure',
  style = "display: flex; flex-wrap: wrap; justify-content: center",
  shiny::div(temp, id = 'dualpanel'), 
  shiny::div(temp, id = 'dualpanel'))
```

```{r chunk2,  echo=FALSE, fig.cap='SECOND FIGURE CAP'}
plot(mtcars$cyl, mtcars$mpg)
```

В результате получается результат с динамическими элементами и сохранением надписей.

введите описание изображения здесь

введите описание изображения здесь

person al-obrien    schedule 22.06.2020