4

我正在构建故事板格式的 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
4

2 回答 2

7

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
  )
 )
```
于 2017-04-11T09:54:00.720 回答
2

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

在此处输入图像描述

在此处输入图像描述

这使得界面清晰，其中包含的绘图以用户可以更好地控制最终显示的方式包含在内。另一个例子是如何在 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", width="100%",height = 300,
        options=list(deferRender=TRUE, scrollY=300, scroller=TRUE))
       )

      )

    ```
于 2017-08-19T17:33:13.947 回答