在R Shiny中实现顶部X轴标签固定（滚动时可见）

要实现滚动页面时顶部X轴固定，同时保留色块悬停提示，可以通过CSS粘性定位结合ggiraph的交互功能实现，无需大幅修改原有代码。

具体实现步骤 #

• 在Shiny的UI中添加自定义CSS，将图表顶部的X轴区域设置为粘性定位，滚动时保持在页面顶部
• 保留原有geom_tile_interactive的悬停提示逻辑（你的代码已实现该部分）
• 调整图表容器样式，让图表主体可滚动，同时固定顶部X轴

修改后的完整代码 #

library(shiny)
library(tidyverse)
library(ggiraph)

ui <- fluidPage(
  # 添加自定义CSS
  tags$style(HTML("
    /* 设置图表容器的最大高度，超出部分滚动 */
    #my_plot_container {
      max-height: 80vh;
      overflow-y: auto;
      position: relative;
    }
    /* 固定顶部X轴：定位SVG中的顶部轴元素 */
    #my_plot svg .axis-x-top {
      position: sticky;
      top: 0;
      background-color: white;
      z-index: 10;
    }
    /* 确保轴标签不会被遮挡 */
    #my_plot svg .axis-x-top text {
      background-color: white;
      padding: 2px;
    }
  ")),
  
  # 用容器包裹girafeOutput，实现滚动
  div(id = "my_plot_container",
      girafeOutput("my_plot")
  )
)

server <- function(input, output){
  output$my_plot <- renderGirafe({
    
    data <- data.frame(
      letter = rep(c(LETTERS, letters, paste0(LETTERS, letters))),
      year = factor(rep_len(2000:2008, 78)),
      value = floor(runif(78, 1, 6))
    )
    
    g <- ggplot(data) + 
      geom_tile_interactive(aes(x = year, y = letter, fill = value, tooltip = value)) + 
      scale_x_discrete(position = "top") + 
      coord_fixed() +
      theme_classic() + 
      theme(
        # 给顶部X轴添加自定义类名，方便CSS定位
        axis.text.x.top = element_text(
          angle = 90,
          hjust = 0.5,
          vjust = 0,
          size = 17,
          class = "axis-x-top"
        ),
        axis.ticks.x.top = element_line(class = "axis-x-top"),
        axis.line.x.top = element_line(class = "axis-x-top")
      ) 
    
    girafe(ggobj = g,  
           options = list(opts_sizing(rescale = FALSE)),
           width_svg = 20,
           height_svg = 50
    )
  })
}

shinyApp(ui = ui, server = server)

代码说明 #

• CSS部分：通过#my_plot_container设置图表容器的最大高度和滚动属性，让过长的图表可以垂直滚动；给顶部X轴的元素（轴标签、刻度、轴线）添加axis-x-top类，用position: sticky实现滚动时固定在顶部，同时设置白色背景避免被下方内容遮挡。
• ggplot部分：给顶部X轴的文本、刻度、轴线添加自定义类名，让CSS可以精准定位这些元素；保留geom_tile_interactive的tooltip参数，确保悬停时显示数值提示。
• girafe设置：保持原有rescale = FALSE的设置，避免图表被自动缩放，保证布局一致性。

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