R语言Shiny应用中调整图像输出至页面右侧的布局实现问题

核心问题说明 #

原代码UI结构不符合sidebarLayout组件的规范用法：sidebarLayout默认包含「左侧侧边栏+右侧主内容区」的两栏布局，你之前将绘图的主面板定义在了sidebarLayout外部，因此渲染后会出现在页面底部。

修正后完整可运行代码 #

library(shiny)
library(shinythemes)
library(dplyr)

function.test<-function(){
  
  df1 <- structure(
    list(date1= c("2021-06-28","2021-06-28","2021-06-28"),
         date2 = c("2021-07-01","2021-07-02","2021-07-04"),
         Category = c("ABC","ABC","ABC"),
         Week= c("Wednesday","Wednesday","Wednesday"),
         DR1 = c(4,1,0),
         DR01 = c(4,1,0), DR02= c(4,2,0),DR03= c(9,5,0),
         DR04 = c(5,4,0),DR05 = c(5,4,0),DR06 = c(5,4,0),DR07 = c(5,4,0),DR08 = c(5,4,0)),
    class = "data.frame", row.names = c(NA, -3L))
  return(df1)
}

ui <- fluidPage(
  shiny::navbarPage(theme = shinytheme("flatly"), collapsible = TRUE,
                    br(),
                    tabPanel("",
                             sidebarLayout(
                               # 左侧控制栏：所有控件都放在这里
                               sidebarPanel(
                                 uiOutput("date"),
                                 uiOutput("mycode"),
                                 conditionalPanel(
                                   condition = "output.mycode",
                                   uiOutput('daterange'),
                                   actionButton("reset", "Reset")
                                 )
                               ),
                               # 右侧主内容区：放绘图输出
                               mainPanel(
                                 tabsetPanel(
                                   tabPanel("Output", plotOutput("graph",width = "100%", height = "600"))
                                 )
                               )
                             )
                    )
  )
)

server <- function(input, output,session) {
  
  data <- reactive(function.test())
  
  output$date <- renderUI({
    req(data())
    all_dates <- seq(as.Date('2021-01-01'), as.Date('2021-01-15'), by = "day")
    disabled <- as.Date(setdiff(all_dates, as.Date(data()$date2)), origin = "1970-01-01")
    dateInput(input = "date2",
              label = h4("Data"),
              min = min(data()$date2),
              max = max(data()$date2),
              value = NA,
              format = "dd-mm-yyyy",
              datesdisabled = disabled)
  })
  
  output$mycode <- renderUI({
    req(input$date2)
    df1 <- data()
    df2 <- df1[as.Date(df1$date2) %in% input$date2,]
    selectInput("code", label = h4("Category"),choices=unique(df2$Category))
  })
  
  my <- reactiveValues(plot=NULL)
  output$graph <- renderPlot({
    if (!is.null(input$date2) & !is.null(input$code)) {
      my$plot <- plot(cars) 
    }else {
      my$plot <- NULL
    }
    my$plot
  })
  
  observeEvent(input$reset, {
    req(input$date2)
    df1 <- data()
    my$plot <- NULL
    updateDateInput(session, 'date2', value = NA)
    updateSelectInput(session, 'code', h4("Category"),choices= unique(df1$Category), selected=character(0))
  })
}

shinyApp(ui = ui, server = server)

主要修改点 #

• 移除了原sidebarLayout第二个参数位置多余的嵌套fluidRow、column和额外的sidebarPanel，将条件显示的控件合并到左侧统一的侧边栏中
• 将绘图的mainPanel直接作为sidebarLayout的第二个参数，自动渲染到页面右侧
• 修正了原代码中重复定义ui <-的语法问题
• 删掉了重复定义的output$graph代码段，避免逻辑冲突

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