如何在R Shiny中实现平行于Y轴的垂直Select Input控件

核心思路 #

Shiny原生下拉选择框没有垂直布局选项，我们可以通过CSS旋转元素的方式实现控件与Y轴平行的效果，同时调整布局位置避免和图表重叠。

完整代码示例 #

library(shiny)
library(ggplot2)

ui <- fluidPage(
  # 自定义CSS实现垂直旋转效果
  tags$style(HTML("
    /* 旋转整个选择框容器，使其与Y轴平行 */
    .vertical-select {
      transform: rotate(-90deg);
      transform-origin: center center;
      /* 绝对定位调整位置，对齐到图表Y轴区域 */
      position: absolute;
      left: -80px;
      top: 200px;
      width: 400px; /* 旋转后原高度转为宽度，需按需调整 */
    }
    /* 反向旋转下拉菜单，保证选项文字正常显示 */
    .vertical-select .dropdown-menu {
      transform: rotate(90deg);
      transform-origin: top left;
      left: 100% !important;
      top: 0 !important;
    }
  ")),
  
  fluidRow(
    # 挂载垂直选择框
    div(class = "vertical-select",
        selectInput(inputId = "y_var",
                    label = "选择Y轴变量",
                    choices = c("Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width"))
    ),
    # 放置图表区域
    column(10, offset = 1,
           plotOutput("plot")
    )
  )
)

server <- function(input, output) {
  output$plot <- renderPlot({
    ggplot(iris, aes(x = Species, y = .data[[input$y_var]])) +
      geom_boxplot() +
      labs(y = input$y_var)
  })
}

shinyApp(ui, server)

关键细节说明 #

• 用transform: rotate(-90deg)旋转整个选择框容器，transform-origin确保旋转中心正确，避免控件偏移
• 通过绝对定位position: absolute调整left和top参数，让控件对齐到图表Y轴附近
• 下拉菜单必须反向旋转90deg，否则选项文字会倒置，同时强制修正菜单的定位规则
• 可根据实际图表尺寸修改width、left、top等值，适配不同布局需求

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