R Shiny中Plotly水平图例在小容器内覆盖图表的问题排查与解决

Plotly图表默认将图例放在右侧时，嵌入Shiny的box组件中无论容器尺寸多小，都能良好适配缩放；但将图例设置为水平布局后，当容器缩得过小时，图例会覆盖图表区域。

绘图代码：

x1 <- rnorm(50)
x2 <- rnorm(10)

fig <- plot_ly() 

fig <- fig %>% 
  add_histogram(x = ~x1, name = "X1", marker = list(color = "red")) %>%
  add_histogram(x = ~x2, name = "X2", marker = list(color ="blue")) %>%
  layout(legend = list(
    orientation = "h",
    traceorder= 'normal',
    xanchor = "center",
    x = 0.5
  ))

Shiny应用代码：

ui <- dashboardPage(dashboardHeader(),
                    dashboardSidebar(),
                    dashboardBody(
                      box(
                        title = "test", 
                        width = 4, 
                        height = "auto", 
                        plotlyOutput("plot1", height = "360px"), 
                        inline = F
                      )
                    ))

server <- function(input, output, session) {
  output$plot1 <- renderPlotly({
    fig
  })
}

shinyApp(ui, server)

默认垂直布局的图例位于图表右侧的独立区域，Plotly会自动调整图表主体的宽度为图例预留空间；而设置水平图例后，默认是将图例放置在图表主体的顶部（紧邻绘图区），没有单独为图例划分专属的顶部空间。当容器宽度缩小到无法容纳横向排列的图例时，图例就会向下挤压，直接覆盖到图表的绘图区域。

方法1：为图例预留顶部空间 #

在layout中设置margin参数给顶部留出容纳图例的空间，同时调整图例的y坐标，将其移到预留的margin区域内：

fig <- fig %>% 
  layout(
    legend = list(
      orientation = "h",
      traceorder= 'normal',
      xanchor = "center",
      x = 0.5,
      y = 1.05 # 将图例移至图表上方的margin区域
    ),
    margin = list(t = 50) # 顶部预留50px空间用于放置图例
  )

方法2：设置图例自动换行 #

通过指定图例项的宽度和间距，让图例在空间不足时自动换行，避免挤压绘图区：

fig <- fig %>% 
  layout(
    legend = list(
      orientation = "h",
      traceorder= 'normal',
      xanchor = "center",
      x = 0.5,
      itemwidth = 30, # 定义每个图例项的宽度
      tracegroupgap = 10, # 设置图例组之间的间距
      y = 1 # 保持图例在顶部位置，空间不足时自动换行
    )
  )

方法3：响应式切换图例布局 #

结合Shiny的容器宽度信息，动态调整图例布局——当容器宽度小于阈值时切换回垂直图例：

server <- function(input, output, session) {
  output$plot1 <- renderPlotly({
    # 获取当前图表容器的宽度
    container_width <- session$clientData$output_plot1_width
    
    if (!is.null(container_width) && container_width < 400) {
      # 宽度小于400px时使用垂直图例
      fig %>% layout(legend = list(orientation = "v", x = 1, y = 0.5))
    } else {
      # 正常宽度下使用水平图例
      fig %>% layout(legend = list(orientation = "h", xanchor = "center", x = 0.5))
    }
  })
}

内容的提问来源于stack exchange，提问作者H. berg