列布局中的 R Shiny Flexdashboard ValueBox

Question

我需要在 Shinydashboard 的列布局中对齐一些元素，该仪表板结合了 flexdashboard 中的一些元素。这是代码：

library(shiny)
library(shinydashboard)
library(flexdashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Dashboard"),
  dashboardSidebar(),
  dashboardBody(
    column(3,flexdashboard::valueBoxOutput("ValueBox")),
    #flexdashboard::valueBoxOutput("ValueBox"),
    column(3,plotOutput("plot1",height = 150)),
    column(6,h3("Gauges"),
           fluidRow(
             column(3,flexdashboard::gaugeOutput("Gauge1")),
             column(3,flexdashboard::gaugeOutput("Gauge2"))
             )
           )
    )
)

server <- function(input, output) {

  output$ValueBox <- renderValueBox({
    shinydashboard::valueBox(
      value = 100,
      subtitle = "Value",
      icon = icon("area-chart"),
      color = "aqua"
    )
  })

  set.seed(122)
  histdata <- rnorm(500)

  output$plot1 <- renderPlot({
    data <- histdata
    hist(data)
  })

  output$Gauge1 <- flexdashboard::renderGauge({
    gauge(60, min = 0, max = 100, symbol = "%") 
  })  

  output$Gauge2 <- flexdashboard::renderGauge({
    gauge(25, min = 0, max = 100, symbol = "%") 
  })    
}

shinyApp(ui, server)

这会产生输出，其中值框仅填充为其设计的空间的大约三分之一：

当我将 更改valueBoxOutput为 a 之外column（注释掉第一行并取消注释第二行dashboardBody）时，值框确实填充了完整分配的空间，但“Gauge”输出被迫在另一行而不是右侧：

我如何强制这两种方法的“组合”，以使结果看起来像这样？

我尝试了以下方法但没有成功：

• 使用shinydashboard::valueBoxOutput代替
• 使用width的参数column以及valueBoxOutput命令

Answer 1

根据 ismirsehregal 的答案尝试列宽后，我发现了问题所在。

UI部分是正确的，两种方式都能够产生结果。问题是内部的定义renderValueBox没有指定width参数，默认情况下该参数设置为 4，表示与父环境相比的相对宽度。因此，在第一种情况下，该框占据宽度为 3 的列的 4/12。在第二种情况下，输出的宽度为 4+3+6=13，该宽度高于 12，因此被分成两部分线。

下面的定义解决了这个问题：

  output$ValueBox <- renderValueBox({
    shinydashboard::valueBox(
      value = 100,
      subtitle = "Value",
      icon = icon("area-chart"),
      color = "aqua",
      width = 12
    )
  })

设置width = 12框填充父环境的整个宽度，在本例中是宽度为 3 的列。也可以width = 3直接使用并删除column定义，但首选第一种方式作为所有三个元素的宽度在 UI 中指定，而不是在服务器中指定。