Shiny应用中实现仅高度可调的可拖拽缩放绘图需求

解决方法 #

利用CSS为Plotly输出容器添加垂直拖拽调整高度的特性，无需额外输入控件，直接通过拖拽右下角调整绘图高度。

完整代码 #

library(shiny)
library(ggplot2)
library(plotly)

ui <- fluidPage(
  # 自定义CSS样式，实现垂直拖拽调整
  tags$style(HTML("
    .resizable-plot {
      resize: vertical; /* 仅允许垂直调整高度 */
      overflow: auto;
      min-height: 300px; /* 设置最小高度，避免缩至过小 */
      max-height: 800px; /* 设置最大高度，防止超出页面范围 */
      border: 1px solid #e0e0e0; /* 添加边框，标记可拖拽区域 */
      padding: 5px;
    }
  ")),
  
  column(width = 6,
         # 将Plotly输出包裹在自定义样式的容器内
         div(class = "resizable-plot",
             plotlyOutput("resizablePlot", height = "100%")
         )
  ) 
)

server <- function(input, output) {
  output$resizablePlot <- renderPlotly({
    ggplotly(ggplot(midwest, aes(x=area, y=poptotal)) + geom_point())
  })
}

shinyApp(ui = ui, server = server)

关键细节 #

• resize: vertical：限制容器仅能垂直拖拽调整，禁止水平方向调整；
• height="100%"：让Plotly绘图自动填充容器高度，随容器尺寸变化同步调整；
• min-height/max-height：约束调整范围，避免容器尺寸异常影响页面布局；
• 边框样式：帮助用户快速识别可拖拽区域，提升交互直观性。

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