首页 > 解决方案 > box() 的闪亮仪表板列布局

问题描述

我有一个看起来像这样的闪亮仪表板:

在此处输入图像描述

# Packages
library(shinydashboard)
library(tidyverse)
library(readxl)
library(scales)
theme_set(theme_light())


header <- dashboardHeader(
  title = "Test App",
  titleWidth = 215
)

sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem("Test Tab", tabName = "test_tab",
             icon = icon("paper-plane"), startExpanded = TRUE)
  )
)


body <- dashboardBody(
  tabItems(
    tabItem(tabName = "test_tab",

            fluidRow(
              column(width = 4,
                     h2("Column X"),
                     valueBoxOutput("first_value", width = NULL),
                     box(flexdashboard::gaugeOutput("second_value", width = "90%", height = "100px"),
                         title = "Second Value", status = "primary", solidHeader = TRUE,
                         collapsible = FALSE, width = NULL
                     )
              ),
              column(width = 8,
                     h2("Column Y"),

                     box(
                       title = "#3", status = "primary", solidHeader = TRUE,
                       collapsible = FALSE, width = 4
                     ),
                     box(
                       title = "#4", status = "primary", solidHeader = TRUE,
                       collapsible = FALSE, width = 4
                     )
              )
            ),

            fluidRow(
              h2("Row A"),

              column(width = 12,

                     box(title = "Third Value", status = "primary", solidHeader = TRUE,
                         width = 2.4),

                     box("Fourth Value", status = "primary", solidHeader = TRUE,
                         width = 2.4),

                     box("Fifth Value", status = "primary", solidHeader = TRUE,
                         width = 2.4),


                     box("Sixth Value", status = "primary", solidHeader = TRUE,
                         width = 2.4),


                     box("Seventh Value", status = "primary", solidHeader = TRUE,
                         width = 2.4)
              )


            )

    )
  )
)


# Put them together into a dashboardPage
ui <- dashboardPage(skin = "blue", header = header,
                    sidebar = sidebar,
                    body = body)


server <- function(input, output) {

  output$first_value <- renderValueBox({

    valueBox(
      comma_format()(100000),
      subtitle = "First Value",
      icon = icon("list"), color = "purple"
    )
  })

  output$second_value = flexdashboard::renderGauge({
    flexdashboard::gauge(0.12 * 100,
                         symbol = '%',
                         min = 0, 
                         max = 100)
  })

}

shinyApp(ui, server)

我试图让 RowA 下面的 box()es 以五列格式排列,如下所示:

Third Value | Fourth Value | Fifth Value | Sixth Value

我不确定我会怎么做。我试图将 5 个盒子放在一个应该可以工作的 fluidRow() 内的 column() 内,但不幸的是,这些盒子继续水平显示......

无论如何以列格式显示框?如果没有,你能指导我使用其他类似于我的功能吗?

标签: rshinydashboard

解决方案


您已将这五个框的每一个的列宽指定为 2.4(我猜是 12/5)。

列宽应该是整数。如果你用 2 代替 2.4 就可以了。

请注意,框 5 右侧将有一个空列,对应于剩余的 2 (12 - 2*5) 个位置。

这是基于引导列布局。有关更多信息,请参阅教程。


推荐阅读