如果使用情节提要布局，如何在 R flexdashboard 页面上显示多个绘图

Posted 2023-03-24

【中文标题】如果使用情节提要布局，如何在 R flexdashboard 页面上显示多个绘图

【英文标题】：How to display multiple plots on an R flexdashboard page if using storyboard layout

【发布时间】：2017-09-04 12:33:55

【问题描述】：

我正在构建故事板格式的 R FlexDashboard。我想在几个故事板页面上显示多个情节，包括一系列使用串扰的链接情节。但是，当我尝试在页面上显示多个绘图或使用 bscols() 函数时，页面看起来一团糟。 R FlexDashboard 的故事板格式是否允许多个绘图？这是一个例子：

---
title: "Error_example"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
    theme: bootstrap
---

###Example: Why can't won't the datatable show up below the plot in this storyboard?

```r
library(plotly)
library(DT)

plot1<-plot_ly(data=diamonds,x=~carat,y=~price)
table1<-datatable(diamonds)

plot1
table1

【问题讨论】：

能否提供minimal reproducible example

编辑：刚刚添加了一个代码示例

【参考方案1】：

bsCols() 似乎完全覆盖了 flexdashboard CSS，所以我会避免使用它。

一个简单的解决方案是将一些 div 添加到 R 块中。比如：

---
title: "I think this should work"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
    theme: bootstrap
---

###Example: Using divs to separate outputs

```r
library(shiny)
library(plotly)
library(DT)

plot1<-plot_ly(data=diamonds,x=~carat,y=~price)
table1<-datatable(diamonds)

 tags$div(
   tags$div(
    plot1
  ),
  tags$div(
    table1
  )
 )
```

【参考方案2】：

这个例子结合了串扰、传单和情节，以一种允许大量情节的方式。诀窍是使用带有可折叠按钮的绝对面板。绝对面板位于传单地图上方，这意味着地图可以像 superzip https://shiny.rstudio.com/gallery/superzip-example.html 中的全尺寸，而按钮允许根据需要显示图。因此，您可以添加任意数量的图表和表格，将它们与串扰联系起来，并且仍然可以讲述您的故事。

这使得界面简洁，其中包含的绘图以用户可以更好地控制最终显示的方式包含在内。另一个例子是这里How to combine row and column layout in flexdashboard?，但没有串扰。

    ---
    title: "Demo"
    output:
      flexdashboard::flex_dashboard:
        orientation: columns
        vertical_layout: fill
    ---


    ```r setup, include=FALSE
    library(flexdashboard)
    library(rmarkdown)
    library(plotly)
    library(shiny)
    library(DT)

    ```


    ```r
    library(crosstalk)
    sd <- SharedData$new(quakes[sample(nrow(quakes), 100),])

    ```


    Map  data-icon="fa-map-o"
    =====================================  
    Sidebar .sidebar data-width=220
    --------------------------------

    ```r, results='asis'

     filter_slider("mag", "Magnitude", sd, column=~mag, step=0.1, width=200)

    ```

    Column data-width=400
    --------------------------------


    ### Planet Earth

    ```r

    library(leaflet)
     leaflet(sd) %>% addTiles() %>% addMarkers()

    ```



    ```r
    ##########################
    absolutePanel(id = "controls", class = "panel panel-default", fixed = TRUE,
                  draggable = TRUE, top = 70, left = "auto", right = 20, bottom = "auto",
                  width = '25%', height = 'auto', 
                  style = "overflow-y:scroll; max-height: 1000px; opacity: 0.9; style = z-index: 400",

                h4(strong("Plot Explorer")),

        HTML('<button data-toggle="collapse" data-target="#box1" class="btn-block btn-primary">dot plot</button>'),
        tags$div(id = 'box1', class="collapse in",

         plot_ly(sd, x = ~depth, y = ~mag) %>% layout(height=200)

                ),

     HTML('<button data-toggle="collapse" data-target="#box2" class="btn-block btn-warning">histogram</button>'),
        tags$div(id = 'box2', class="collapse",

           plot_ly(sd, x = ~depth, y = ~mag, type = "histogram", name = "Histogram") %>% layout(height=200)
        ),

      HTML('<button data-toggle="collapse" data-target="#box3" class="btn-block btn-danger">table</button>'),
        tags$div(id = 'box3', class="collapse in",

     datatable(sd, extensions="Scroller", style="bootstrap", class="compact", ,height = 300,
        options=list(deferRender=TRUE, scrollY=300, scroller=TRUE))
       )

      )

    ```