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

Question

我正在尝试将带有 R 的甘特图中DiagrammeR的示例嵌入到 Shiny 文档中。我正在尝试解决两个问题：

1) 将textAreaInputCourier 中的字体改成新的，最好是小一点的。（我在发布一小时后得到了这个解决方案，方法是将以下内容添加到 Rmd 的顶部，就在最后一个---:)

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

2）使mermaid甘特图更大，以便我可以看到动态变化（我尝试添加width=900等等，但没有运气。问题似乎仅限于 RStudio，因为如果我打开此 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块或textAreaInput中调整textarea的宽度/高度。

2) 您可以在DiagrammeROutput中调整图表的宽度/高度。最后，将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)
      )
    })
```