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更改为column之外时（在dashboardBody中注释掉第一行，并取消注释第二行），值框会填满已分配的全部空间，但是“仪表”输出被强制在另一行而不是在右边：

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

我尝试了以下操作但未成功：

改为使用shinydashboard::valueBoxOutput
使用width的{{1}}参数以及column命令

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并退出{{ 1}}的定义，但首选第一种方法，因为这三个元素的宽度都是在UI中指定的，而不是在服务器中指定的。

Answer 2

这对我有用：

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)

列布局中的R Shiny Flexdashboard ValueBox

2 个答案: