R语言Shiny应用UI布局优化 实现图表简洁排布的调整方案

调整方案 #

你可以直接放弃默认的sidebarLayout结构，改用Shiny原生的栅格系统（fluidRow+column）手动拆分页面结构，即可实现预期布局：

1. 第一行拆分为宽度4的筛选区（保留原侧边栏的样式和内容）+ 宽度8的聚类图展示区，满足聚类图和侧边栏并排通栏的需求
2. 从第二行开始使用全宽区域，每个图表占6宽度，实现每排放2张的效果

调整后的完整UI代码 #

ui<-fluidPage(
  titlePanel('Minimal example'),
  tabsetPanel(
    tabPanel("example text",
             # 第一行：左侧筛选栏 + 右侧聚类图
             fluidRow(
               # 左侧4宽度：筛选控件，用wellPanel保留原侧边栏样式
               column(width = 4,
                      wellPanel(
                        dateRangeInput("daterangeinput", "Select date range", format = "yyyy-mm-dd",
                                       start = min("2021-06-05"),
                                       end = max("2021-06-15")),
                        numericInput("start", "Select minimum",10,min=0, max=23),
                        numericInput("end", "Select maximum",22, min=0, max=23),
                        pickerInput("choice", "Pick something",
                                    choices = choices1, options = list('actions-box'=TRUE,'live-search'=TRUE), multiple = T)
                      )
               ),
               # 右侧8宽度：聚类图
               column(width = 8,
                      h4("Cluster plot"), 
                      plotOutput("clusterplot", width = "100%")
               )
             ),
             # 后续图表：全宽区域每排2张
             fluidRow(
               column(width = 6, h4("Scatter plot"),plotOutput("scatterplot", width="100%")),
               column(width = 6, h4("Box plot"),plotOutput("boxplot", width ="100%"))
             ),
             fluidRow(
               column(width = 6, h4("Histogram"),plotOutput("histogram", width ="100%")),
               column(width = 6, h4("Bar plot"),plotOutput("barplot", width ="100%"))
             )
    )#end of tabpanel
  )#end of tabset panel
)#end of fluidpage/UI

注意事项 #

代码中使用了pickerInput控件，需要先加载shinyWidgets包，请在代码的library部分添加：

library(shinyWidgets)

否则运行会报错。

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