【问题标题】:Combine in flexdashboard with multiple pages different types of vertical_layout在 flexdashboard 中结合多个页面不同类型的 vertical_layout
【发布时间】:2017-08-30 17:05:49
【问题描述】:

我创建了一个包含多个页面的 flexdashboard 文档。我想在第一页上显示vetical_layout: fill,但在第二页上我想在第二页上显示vertical_layout: scroll。我的文档是这样开始的:

---
title: "DASHBOARD"
output:
  flexdashboard::flex_dashboard:
    orientation: columns
    logo: logo.png
    vertical_layout: fill
---

如何查看带有vertical_layout: scroll 的第二页?

【问题讨论】:

    标签: r layout r-markdown flexdashboard


    【解决方案1】:

    您可以覆盖单个 (H2) 列上的全局 vertical_layout 值。

    ---
    title: "Changing Vertical Layout"
    output: 
      flexdashboard::flex_dashboard:
        orientation: columns
        vertical_layout: fill
    ---
    
    ```{r setup, include=FALSE}
    library(flexdashboard)
    library(ggplot2)
    ```
    
    Page 1
    ================================
    
    Column {data-width=650}
    -----------------------------------------------------------------------
    
    ### Panel A
    ```{r}
    qplot(cars$speed)
    qplot(cars$dist)
    ```
    
    Column {data-width=350}
    -----------------------------------------------------------------------
    
    ### Panel B
    ```{r}
    qplot(cars$speed)
    ```
    
    ### Panel C
    ```{r}
    qplot(cars$dist)
    ```
    
    Page 2
    ================================
    
    Column { vertical_layout: scroll}
    -----------------------------------------------------------------------
    
    ### Panel A 
    ```{r}
    qplot(cars$speed)
    qplot(cars$dist)
    ```
    
    ```{r}
    qplot(cars$speed)
    qplot(cars$dist)
    ```
    
    ```{r}
    qplot(cars$speed)
    qplot(cars$dist)
    ```
    

    这是覆盖全局值的类似示例。 (但是in this case,他们正在改变页面(H1)级别的方向)。

    【讨论】:

      【解决方案2】:

      以下解决方案对我有用。在 YAML 标头中,我使用“vertical_layout:fill”将默认行为设置为“fill”。然后,我在需要滚动的页面的页眉和列头中使用下面的 CSS 样式。

      Page 3 {style="position:relative;"}
      ========================================================
      
      Column {style="height:100pc;"}
      --------------------------------------------------------
      
      ### Chart A
      
      ``` {r}
      ```
      
      ### Chart B
      
      ``` {r}
      ```
      

      【讨论】:

      • 接受的答案似乎对我不起作用,但这个答案对我有用!
      猜你喜欢
      • 2018-05-22
      • 2021-08-08
      • 1970-01-01
      • 2019-06-25
      • 1970-01-01
      • 1970-01-01
      • 2022-01-01
      • 1970-01-01
      • 2016-05-22
      相关资源
      最近更新 更多