闪亮文档中的 renderDiagrammeR 美人鱼图大小

Question

我正在尝试将 Gantt charts with R 中的 DiagrammeR 示例嵌入到 Shiny 文档中。我试图解决两个问题：

1) 把textAreaInputCourier 里的字体改成New，最好小一点。（我在发布一个小时后通过将以下内容添加到最终 --- 下方的 Rmd 顶部得到了这个解决方案：）

<style>
textarea {
  font-family: Courier New;
}
</style>

2) 使 mermaid 甘特图更大，这样我就可以看到动态变化（我尝试添加 width=900 等等，但没有运气。问题似乎仅限于 RStudio，因为如果我在 Chrome 中打开这个 Shiny 文档，甘特图周围的空白不存在。）

整个 Shiny 文档的代码在这里。任何帮助将不胜感激。谢谢:)

---
title: "Gantt Chart with Mermaid & DiagrammeR"
output: html_document
runtime: shiny
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{r echo=FALSE, message=FALSE}
library(knitr)
library(DiagrammeR)

inputPanel(
  textAreaInput("inText", NULL, width="900px", rows=15, value="
gantt
dateFormat  YYYY-MM-DD
title A Very Nice Gantt Diagram

section Basic Tasks
This is completed             :done,          first_1,    2014-01-06, 2014-01-08
This is active                :active,        first_2,    2014-01-09, 3d
Do this later                 :               first_3,    after first_2, 5d
Do this after that            :               first_4,    after first_3, 5d

section Important Things
Completed, critical task      :crit, done,    import_1,   2014-01-06,24h
Also done, also critical      :crit, done,    import_2,   after import_1, 2d
Doing this important task now :crit, active,  import_3,   after import_2, 3d
Next critical task            :crit,          import_4,   after import_3, 5d

section The Extras
First extras                  :active,        extras_1,   after import_4, 3d
Second helping                :               extras_2,   after extras_1, 20h
More of the extras            :               extras_3,   after extras_1, 48h
  ")
)

renderDiagrammeR({
  mermaid(
     paste0(input$inText)
  )  
})
```

Answer 1

我做了轻微的（风格）改变（希望你不介意）。

1) 更改 css 块 textarea 中的字体和大小。使用 !important 规则，您可以覆盖 css Bootstrap 中的特定（默认）属性。此外，您可以在同一 css 块或 中调整 textarea 的 width/height ]textAreaInput.

2) 您可以在DiagrammeROutput中调整图的width/height。最后，将值从 input$inText 传递到 output$diagram.

---
title: "Gantt Chart with Mermaid & DiagrammeR"
output: html_document
runtime: shiny
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{css textarea, echo = FALSE}
textarea {
  # width: 900px !important;
  # height: 440px !important;
  font-family: Courier New !important;
  font-size: 12px !important;
  background-color: #cccccc !important;
  # background-color: lightgrey !important;
  border: none !important;
  border-radius: 10px solid #ffffff !important;
}
```

```{r gantt-chart, echo = FALSE, message = FALSE}
library(knitr)
library(DiagrammeR)

shiny::textAreaInput(inputId = "inText", label = NULL, width = "900px", height = "370px", rows = 15, value = "
gantt
dateFormat  YYYY-MM-DD
title A Very Nice Gantt Diagram

section Basic Tasks
This is completed             :done,          first_1,    2014-01-06, 2014-01-08
This is active                :active,        first_2,    2014-01-09, 3d
Do this later                 :               first_3,    after first_2, 5d
Do this after that            :               first_4,    after first_3, 5d

section Important Things
Completed, critical task      :crit, done,    import_1,   2014-01-06,24h
Also done, also critical      :crit, done,    import_2,   after import_1, 2d
Doing this important task now :crit, active,  import_3,   after import_2, 3d
Next critical task            :crit,          import_4,   after import_3, 5d

section The Extras
First extras                  :active,        extras_1,   after import_4, 3d
Second helping                :               extras_2,   after extras_1, 20h
More of the extras            :               extras_3,   after extras_1, 48h
")

DiagrammeR::DiagrammeROutput(outputId = "diagram", width = "950px", height = "auto")

output$diagram <- 
  DiagrammeR::renderDiagrammeR({
    DiagrammeR::mermaid(
      base::paste0(input$inText)
      )
    })
```

闪亮文档中的 renderDiagrammeR 美人鱼图大小

renderDiagrammeR mermaid diagram size in a Shiny Document

r

shiny

mermaid

diagrammer