列布局中的 R Shiny Flexdashboard ValueBox

Question

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

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)

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

当我将 valueBoxOutput 更改为 column 之外（在 dashboardBody 中注释掉第一行并取消注释第二行）时，值框确实填充了已分配的全部space，但是 "Gauge" 输出被强制放在另一行而不是右边：

如何强制执行这两种方法的 "combination" 以使结果看起来像这样？

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

改用shinydashboard::valueBoxOutput
利用 column 的 width 参数以及 valueBoxOutput 命令

Answer 1

这对我有用：

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

ui <- dashboardPage(
  dashboardHeader(title = "Dashboard"),
  dashboardSidebar(),
  dashboardBody(
    flexdashboard::valueBoxOutput("ValueBox", width = "100%"), # Edit %
    #flexdashboard::valueBoxOutput("ValueBox"),
    column(4,plotOutput("plot1",height = 150)),
    column(4,h3("Gauges"),
           fluidRow(
             column(6,flexdashboard::gaugeOutput("Gauge1")),
             column(6,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)

因此，这是基于 Radek Janhuba 的见解的首选方法 - 在渲染时设置适当的宽度（供稍后访问这里的每个人使用）：

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

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

server <- function(input, output) {

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

  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)

Answer 2

根据 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 中指定，而不是在服务器中指定。

列布局中的 R Shiny Flexdashboard ValueBox

R Shiny Flexdashboard ValueBox in Column layout

r

shiny

shinydashboard

flexdashboard