如何调整Shiny应用中生成的拉伸图表 使其更美观居中

你当前遇到的图表拉伸问题，核心是plotOutput默认会自适应父容器大小，没有固定宽高限制，导致比例失衡。可通过以下几种方式调整，实现居中显示+不变形的效果：
#

可行调整方案 #

• 方案1：直接指定绘图输出的固定宽高
  给plotOutput设置width、height参数，直接限制绘图的尺寸，避免被容器拉伸：

  # 将mainPanel中的plotOutput修改为如下
  plotOutput("Graph", width = "75%", height = "450px")
  

  其中width可以用百分比适配屏幕，height用固定像素值保证比例稳定。

• 方案2：添加CSS样式实现居中+限制最大宽度
  在ui中插入自定义CSS，既可以让图表在容器中居中，还能限制大屏下的最大宽度，避免过度拉伸：

  # 在fluidPage开头加入样式代码
  fluidPage(
    tags$style(HTML("
      /* 图表居中+限制最大宽度 */
      #Graph {
        margin: 0 auto !important;
        max-width: 850px;
      }
    ")),
    # 原有navbarPage代码不变
    shiny::navbarPage(......)
  )
  

• 方案3：调整renderPlot的绘图参数
  控制绘图本身的渲染分辨率和尺寸，从生成层面固定比例：

  output$Graph <- renderPlot({
    function.cl()[["Plot1"]]
  }, res = 96, width = 700, height = 420)
  

  res参数控制绘图分辨率，数值越大图表越清晰，width和height控制绘图的生成比例。

• 方案4：固定宽高比适配不同屏幕
  用CSS的aspect-ratio属性让图表始终保持固定宽高比，适配所有屏幕尺寸都不会变形：

  tags$style(HTML("
    #Graph {
      margin: 0 auto !important;
      width: 90%;
      max-width: 900px;
    }
    #Graph > div {
      aspect-ratio: 16 / 9; /* 可根据需要调整为4/3等其他比例 */
    }
  "))
  

修改后完整示例代码 #

library(shiny)
library(shinythemes)
function.cl<-function(){
  df <- structure(
    list(Update = c("2021-08-21","2021-08-21","2021-08-21","2021-08-21","2021-08-21"),
         date = c("2021-04-01","2021-05-02","2021-06-03","2021-07-04","2021-08-05"),
         D1 = c(3,1,4,5,6), DR01 = c(2,4,5,6,7), DR02 = c(6,3,2,6,1),DR03 = c(5,2,8,9,7),
         DR04 = c(3,5,3,3,7)),class = "data.frame", row.names = c(NA, -5L))
  df[c("Update", "date")] <- lapply(df[c("Update", "date")], as.Date)
  historic<-subset(df,df$date<df$Update) 
  
  average<-mean(historic$D1) 
  standard<-sd(historic$D1)
  evol<-subset(df,df$date<df$Update) 
  median_ocup<-sapply(evol[startsWith(names(evol), "DR")], median)
  
  Plot1<-plot(median_ocup[1:10],xlab="Days",ylab="Number",ylim=c(1, 6))
  abline(h=c(average-standard, average, average+standard), col="red", lwd=5)
  
  return(list(
    "Plot1" = Plot1, 
    date = df$date
  ))
  
}   

ui <- fluidPage(
  # 新增自定义样式
  tags$style(HTML("
    #Graph {
      margin: 0 auto !important;
      width: 90%;
      max-width: 850px;
    }
  ")),
  shiny::navbarPage(theme = shinytheme("flatly"), collapsible = TRUE,
                          br(),
                          tabPanel("",
                                   sidebarLayout(
                                     sidebarPanel(
                                       uiOutput("date"),
                                       br(),
                                     ),
                                     mainPanel(
                                       tabsetPanel(
                                         # 调整plotOutput的高度
                                         tabPanel("Graph",plotOutput("Graph", height = "450px"))),
                                     ))
                          )))


server <- function(input, output,session) {
  data <- reactive(function.cl())
  
  output$date <- renderUI({
    all_dates <- seq(as.Date('2021-01-01'), as.Date('2021-01-15'), by = "day")
    disabled <- as.Date(setdiff(all_dates, as.Date(data()$date)), origin = "1970-01-01")
    
    dateInput(input = "date", 
              label = "Select Date",
              min = min(data()$date),
              max = max(data()$date),
              value = max(data()$date),
              format = "dd-mm-yyyy",
              datesdisabled = disabled)
  })
  
  output$Graph <- renderPlot({
    function.cl()[["Plot1"]]
  }, res = 96)
  
}

shinyApp(ui = ui, server = server)

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