如何在窄窗口Shiny应用中实现ggplot2饼图顶部对齐？

在开发Shiny应用时，使用splitLayout在同一行展示两个ggplot图形，即使设置align:top样式，饼图仍无法和散点图顶部对齐。窗口变窄时，饼图会垂直居中，上方出现大量空白。尝试过div、column等方法均无效，推测和ggplot的图形缩放规则有关。另外有时需要将饼图和verbatimTextOutput等模块搭配展示，无法合并绘制图形，需要解决空白问题实现顶部对齐。

问题原因与解决方案 #

核心原因是饼图使用coord_polar()后，ggplot会自动添加额外空白区域适配极坐标布局，同时Shiny的plotOutput默认高度和对齐方式也会影响。可通过以下两步解决：

1. 清除ggplot绘图区域的多余空白
   使用theme_void()移除所有不必要的轴、网格元素，再通过plot.margin消除绘图区域的默认边距，从源头减少空白。

2. 设置容器的垂直对齐样式
   无论是splitLayout还是div布局，都要给每个输出容器设置正确的CSS属性vertical-align: top;（注意之前的align: top是错误写法）。

修改后的完整代码 #

使用splitLayout的版本 #

library(shiny)
library(ggplot2)
ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      sliderInput("obs",
                  "Number of observations:",
                  min = 0,
                  max = 1000,
                  value = 500)
    ),
    mainPanel(
      splitLayout(
        cellArgs = list(style = "vertical-align: top;"),
        plotOutput("plot1"),
        plotOutput("plot2")
      )
    )
  )
)
server <- function(input, output){
  output$plot1 <- renderPlot({
    data <- data.frame(x=letters[1:4], y=c(0.1,0.2,0.3,0.4))
    ggplot(data, aes(x = "", y = y, fill = x))+
      geom_bar(stat = 'identity', position = 'stack')+
      coord_polar(theta = 'y')+
      theme_void() +  # 移除所有冗余元素
      theme(plot.background = element_rect(fill = "green"),
            plot.margin = margin(0, 0, 0, 0, "pt"))  # 消除绘图边距
  })
  output$plot2 <- renderPlot(
    ggplot(cars, aes(speed, dist))+
      geom_point()+
      theme(plot.background = element_rect(fill = "green"),
            plot.margin = margin(0, 0, 0, 0, "pt"))  # 统一边距保持对齐
  )
}
shinyApp(ui, server)

使用div布局的修正版本 #

div(
  style = "width: 100%; overflow: hidden;",
  div(style = "width:50%; float:left; vertical-align: top;", plotOutput("plot1")),
  div(style = "width:50%; float:left; vertical-align: top;", plotOutput("plot2"))
)

额外说明 #

• theme_void()比手动隐藏轴和网格更彻底，能有效减少极坐标绘图产生的空白。
• 统一两个图形的plot.margin参数，避免因边距差异导致的对齐偏差。
• CSS属性需使用vertical-align: top，这是控制行内元素垂直对齐的标准写法。

内容的提问来源于stack exchange，提问作者LIANG Chen