代码之家 › 专栏 › 技术社区 › RL_Pug

如何让闪亮的仪表板盒子填满我的仪表板的整个宽度

shinydashboard shiny r

RL_Pug · 技术社区 · 3 年前

我正在努力使我的仪表板布局以一种看起来不错的方式进行格式化。

我有一个盒子,它不是我仪表板的全宽,里面的情节实际上更宽,而且从里面伸出来。(尽管我相信一旦我制作了一个情节图,它就会很好地工作)。

我使用fillRow,但它不会填充整行,只填充页面的一半。

这是我的密码。

library(shiny)
library(shinydashboard)


ui <- dashboardPage(
  dashboardHeader(),
  ## Sidebar content
  dashboardSidebar(
    sidebarMenu(
      menuItem("Overview",tabName = "Overview", icon = icon("tachometer-alt")),
      menuItem("Assessments",tabName = "Assessments", icon = icon("list"))
    )
  ),
  dashboardBody(
    tabItems(
      # First tab content
      tabItem(tabName = "Overview",
              # Boxes need to be put in a row (or column)
              fluidRow(
                valueBoxOutput("rate"),
                valueBoxOutput("count"),
                valueBoxOutput("users"),
              ),
              fluidRow(  
                box(title = "Title",
                    status = "primary",
                ),
                
                box(align = "center",
                    title = "Select Inputs",status = "warning", solidHeader = F,
                    selectInput("dropdown1", "Select Drilldown:", c(50,100,200)))
              ),
              fillRow(width = "100%",
                       box(
                         title = "Graph 1", status = "primary", solidHeader = TRUE, 
                         plotOutput("plot1", height = "50vh", width = "100vh")))
      ),
      tabItem(tabName = "Assessments",
              h2("Assessmnents tab content")
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)
  
  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$dropdown1)]
    hist(data)
  })
  
  output$instructions <- renderText("Company Name")
  
  output$rate <- renderValueBox({
    valueBox(
      value = 130,
      subtitle = "Overview 1",
      icon = icon("area-chart"),
      color =  "aqua"
    )
  })
  
  output$count <- renderValueBox({
    valueBox(
      value = 120,
      subtitle = "Overview 2",
      icon = icon("download"),
      color = "red"
    )
  })
  
  output$users <- renderValueBox({
    valueBox(
      value = 85,
      subtitle = "Overview 3",
      icon = icon("users"),
      color = "purple"
    )
  })
  
}

shinyApp(ui, server)

还有一个屏幕截图

我想要的目标是这样的

有什么值得推荐的资源可以让我更好地了解闪亮的仪表板布局和控制视图吗?

0 回复 | 直到 3 年前

Geovany 3 年前

你需要使用 width = 12 在中 box 作用此外,为了确保绘图始终使用长方体的整个宽度,请使用 width = "100%" 在里面 plotOutput 。

fillRow(
  box(
    width = 12, 
    title = "Graph 1", 
    status = "primary", 
    solidHeader = TRUE, 
    plotOutput(
      "plot1", 
      height = "50vh", 
      width = "100%")
  )
)

这个 Shiny Dashboard 文档是开始学习Shiny Dashboard的结构、外观和行为的好地方。您还可以通过使用获得一些额外的功能 shinydashboardPlus 最后 shinyWidgets 提供了一系列具有改进视觉外观的自定义小部件。

Joe Christian 3 年前

这一切都与布局有关。在这里,我提供了闪亮的仪表板骨架和一些可能适合您问题的解释。你可以把这个代码放在里面 dashboardBody(tabItems(tabItem(tabName = "Overview",...)))

fluidPage(
  fluidRow(
    column(width = 4,valueBoxOutput(width = 12,"blue_value_box")) ,
    column(width = 4,valueBoxOutput(width = 12,"red_value_box")) ,
    column(width = 4,valueBoxOutput(width = 12,"purple_value_box"))
  ),
  fluidRow(
    column(width = 6,box(width = 12,"Title")),
    column(width = 6,box(width = 12,"Select Inputs",
                         selectInput("someinputhere")))
  ),
  fluidRow(
    column(width = 12,
           box(width = 12,plotOutput("histogramofdata"))
    )
  )
)

首先,对于您的案例来说,列不是必需的,它只是非常有助于解释闪亮的布局。请记住,光泽有一个严格的宽度值,最大值为12。如果您在框或中定义宽度 column() ,内部的所有内容都将遵循其宽度,而不是全局宽度。例如,在我的例子中,我把 valueboxoutput() 内部列()。您可以看到该列的宽度为4,而valueboxoutput的宽度为12。这个 列() 将跟随页面宽度,值框将跟随列宽度。我不知道这是否是最好的练习,但我喜欢使用 fluidrow() 在有光泽的物体之间按行分隔。

为了获得更清晰的示例,在上图中,我突出显示了 流体流动() 红色和蓝色的 列() 。