时间戳

首页 > 解决方案 > Shiny仪表板中的相同高度框

r - Shiny仪表板中的相同高度框

问题描述

在创建闪亮的仪表板时，我认为如果盒子的高度相等，它们的顶部和底部就会对齐。不是这种情况。这里的顶部很好地对齐，而底部则没有：

在此处输入图像描述

如何确保顶部和底部对齐？

注意：即使两个框填充了完全相同的 ggplot ，也会发生相同的底部错位。

这些说明暗示这很容易。

可以通过设置高度来强制所有盒子的高度相同。与使用 12 宽 Bootstrap 网格设置的宽度相比，高度以像素为单位指定。

示例代码

## app.R ##
library(shiny)
library(shinydashboard)
library(ggplot2)

ui <- dashboardPage(
  dashboardHeader(title = "Box alignmnent test"),
  dashboardSidebar(),
  dashboardBody(
    # Put boxes in a row
    fluidRow(
      box(tableOutput("pop_num"), height = 350),
      box(plotOutput("speed_distbn", height = 350))
    )
  )
)

server <- function(input, output) { 

  # Population numbers
  output$pop_num <- renderTable({
    df <- tibble(
      x = c(1,2,3,4),
      y = c(5, 6, 7, 8)
    )
  })


  # Population distribution graph
  output$speed_distbn <- renderPlot({
    ggplot(data = cars, aes(x = speed, y = dist)) +
      geom_point()
  })
}

shinyApp(ui, server)

标签： rshinyshinydashboard

解决方案

请注意，当您设置高度时，第一个350应用于box函数，而第二个350作为参数传递给plotOutput函数。

只要确保两个box函数都传递了相同的高度参数；另请注意，如果绘图（可能包括一些额外的填充/边距）的总高度大于封闭框的高度，它将溢出底部。所以为了安全起见，将参数height传递给and函数：plotOutputbox

box_height = "20em"
plot_height = "16em"

ui <- dashboardPage(
  dashboardHeader(title = "Box alignmnent test"),
  dashboardSidebar(),
  dashboardBody(
    # Put boxes in a row
    fluidRow(
      box(tableOutput("pop_num"), height = box_height),
      box(plotOutput("speed_distbn",height = plot_height), height = box_height)
    )
  )
)

请注意，绘图的高度较小。可能有一种更聪明的方法可以自动执行此操作（当然，如果您执行一些自定义 CSS！），但出于说明目的，这是可行的。

推荐阅读