ShinyDashboard - 在同一行显示3个以上的infoBox

时间:2015-12-28 12:42:20

标签: r shiny shinydashboard

我想在同一行显示4个infoBoxes(或valueBoxes,我真的不在乎),它似乎无法正常工作......

这是一个有效的代码简化版本,基于Rstudio wesite上的shinydashbaord教程(我的使用的是infoBoxOutputs,但我想这对于格式化并不重要):

ui <- dashboardPage(
  dashboardHeader(title = "Info boxes"),
  dashboardSidebar(),
  dashboardBody(
    # infoBoxes with fill=FALSE
    fluidRow(
      infoBox("1st", 10 * 2, icon = icon("credit-card")),
      infoBox("2nd", 10 * 2, icon = icon("credit-card")),
      infoBox("3rd", 10 * 2, icon = icon("credit-card")),
    )
  )
)

在同一行显示3个infoBox。但是,一旦我再添加一个infoBox,它就会移到一个新行:

ui <- dashboardPage(
  dashboardHeader(title = "Info boxes"),
  dashboardSidebar(),
  dashboardBody(
    # infoBoxes with fill=FALSE
    fluidRow(
      infoBox("1st", 10 * 2, icon = icon("credit-card")),
      infoBox("2nd", 10 * 2, icon = icon("credit-card")),
      infoBox("3rd", 10 * 2, icon = icon("credit-card")),
      infoBox("4th", 10 * 2, icon = icon("credit-card")),
    )
  )
)

我也尝试使用列 - 然后这些框显示在同一行上,但是被扭曲了。

有什么想法吗?

3 个答案:

答案 0 :(得分:6)

fluidRow的{​​{1}}内,我们知道它的最大列宽为12.

查看shiny函数:

infoxBox

我们看到宽度设置为infoBox(title, value = NULL, subtitle = NULL, icon = shiny::icon("bar-chart"), color = "aqua", width = 4, href = NULL, fill = FALSE) }

要在一行中安装所需的4个信息框,只需设置width = 4

所有意图和目的的明确示例:

width = 3

产量:

enter image description here

答案 1 :(得分:3)

显然这就是我要找的东西:

在server.R中: 设置宽度= 3的值框:

output$infoBox1 <- renderValueBox({..., valueBox(...,width = 3)})

在UI.R中: 使用valueBoxOutputs放置4列,以这种方式:

column( 3,valueBoxOutput("infoBox1", width = 12))

答案 2 :(得分:0)

library(shiny)
library(shinydashboard)

server <- function(input, output) {
}

ui <- fluidPage(
  fluidPage(                      ##Change for fluidPage
     mainPanel(width = 12,        ##HERE 
      infoBox("test", value=1, width=3),
      infoBox("test", value=2, width=3),
      infoBox("test", value=3, width=3),
      infoBox("test", value=4, width=3)
  )
)

shinyApp(ui = ui, server = server)

这似乎对我有用。我的应用程序有同样的问题。