【问题标题】:Change height of valueboxes in Flexdashboard更改 Flexdashboard 中值框的高度
【发布时间】:2021-07-26 19:03:50
【问题描述】:

我正在制作一个面向列的 Flexdashboard,其中包含四个值框以及图形和表格。值框以前有一定的高度,但我最近更改了其中一个值框的信息,现在所有框的高度都更大了。下面是代码如何查找四个值框

vb1<-valueBox(Parkvorgaenge_Insgesamt,"Parkvorgänge Insgesamt", icon = "fa-car", color = "warning")
vb2<-valueBox(Parkstunden_Insgesamt,"Parkstunden Insgesamt", icon = "fa-hourglass-end", color = "warning")
vb3<-valueBox(Einnahmen_Insgesamt,"Einnahmen Insgesamt", icon = "fa-eur", color = "warning")
vb4<-valueBox(Durchschnittliche_Parkdauer,"Durchschnittliche Parkdauer", icon = "fa-clock", color = "warning")
Column {data-width=350}
-----------------------------------------------------------------------

### 

``{r}
renderValueBox(vb1)
``

### 

``{r}
renderValueBox(vb2)

``


### 

``{r}
renderValueBox(vb3)

``

### 

``{r}
renderValueBox(vb4)

``

我尝试在三个主题标签中添加{data-height = some number}(例如### {data-height = some number}),但这并没有改变高度。我在网上查过,但没有直接回答这个问题。

简而言之,Flexdashboard中如何控制数值框的高度?

【问题讨论】:

    标签: css r shiny flexdashboard


    【解决方案1】:

    您可以使用 css 更改值框的高度:

    ---
    title: "Tabset Column"
    output:
      flexdashboard::flex_dashboard
    runtime: shiny
    ---
    
    ```{css}
    .value-box {
      height: 200px;
    }
    
    ```
    
    ```{r global, echo = FALSE}
    library(shiny)
    library(flexdashboard)
    
    vb1<-valueBox(2000,"Parkvorgänge Insgesamt", icon = "fa-car", color = "warning")
    vb2<-valueBox(541515,"Parkstunden Insgesamt", icon = "fa-hourglass-end", color = "warning")
    vb3<-valueBox(30000,"Einnahmen Insgesamt", icon = "fa-eur", color = "warning")
    vb4<-valueBox(5.4,"Durchschnittliche Parkdauer", icon = "fa-clock", color = "warning")
    ```
    
    Column 
    -----------------------------------------------------------------------
    
    ### 
    
    ```{r}
    renderValueBox(vb1)
    ```
    
    ### 
    
    ```{r}
    renderValueBox(vb2)
    
    ```
    
    
    ### 
    
    ```{r}
    renderValueBox(vb3)
    
    ```
    
    ### 
    
    ```{r}
    renderValueBox(vb4)
    
    ```
    

    或者,您可以将 css 放在单独的文件中。在下面的示例中,它被称为styles.css,它与应用程序位于同一文件夹中。

    .value-box {
      height: 200px;
    }
    

    这将是应用程序本身:

    ---
    title: "Tabset Column"
    output:
      flexdashboard::flex_dashboard:
        css: styles.css
    runtime: shiny
    ---
    
    ```{r global, echo = FALSE}
    library(shiny)
    library(flexdashboard)
    
    vb1<-valueBox(2000,"Parkvorgänge Insgesamt", icon = "fa-car", color = "warning")
    vb2<-valueBox(541515,"Parkstunden Insgesamt", icon = "fa-hourglass-end", color = "warning")
    vb3<-valueBox(30000,"Einnahmen Insgesamt", icon = "fa-eur", color = "warning")
    vb4<-valueBox(5.4,"Durchschnittliche Parkdauer", icon = "fa-clock", color = "warning")
    ```
    
    Column 
    -----------------------------------------------------------------------
    
    ### 
    
    ```{r}
    renderValueBox(vb1)
    ```
    
    ### 
    
    ```{r}
    renderValueBox(vb2)
    
    ```
    
    
    ### 
    
    ```{r}
    renderValueBox(vb3)
    
    ```
    
    ### 
    
    ```{r}
    renderValueBox(vb4)
    
    ```
    

    【讨论】:

    • 我编辑了您的答案以在 .Rmd 中添加 css,这是一个很棒的 Rmarkdown/shiny CSS 技巧。谢谢
    • 感谢您的建议!
    猜你喜欢
    • 1970-01-01
    • 2018-10-27
    • 2021-06-19
    • 2011-08-16
    • 1970-01-01
    • 2021-10-17
    • 2013-01-27
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多