R Shiny应用中ggplotly图例被裁剪的问题求助

问题根源 #

你设置的图例x = -.1是基于绘图区域的相对偏移，当浏览器窗口缩小时，绘图区域宽度变窄，这个左偏移会让图例部分内容超出plotlyOutput的容器边界，导致裁剪。同时固定的height = "400px"也限制了底部空间，无法容纳图例。

解决方案（通过plotly::layout调整） #

可以通过以下几种方式调整layout参数来解决：

方案1：调整图例定位与容器边距 #

将图例居中对齐，同时给绘图区域底部增加足够的边距，确保图例不会被裁剪：

ggplotly(p) %>% 
  plotly::layout(
    xaxis = list(
      title = list(text = "Year", font = list(size = 14, family = "Arial black")),
      tickfont = list(family = "Arial black"),
      tickangle = -45
    ),
    yaxis = list(
      title = list(text = "Number of Patients", font = list(size = 14, family = "Arial black")),
      tickfont = list(family = "Arial black")
    ),
    legend = list(
      orientation = "h",
      y = -.25,  # 保持垂直位置不变
      x = 0,     # 改为居中对齐
      xanchor = "center"  # 锚点设为中心，确保居中生效
    ),
    margin = list(b = 80)  # 增加底部边距，给图例留出空间
  ) %>% 
  plotly::config(displaylogo = FALSE,
                 modeBarButtonsToRemove = list('hoverClosestCartesian',
                                               'hoverCompareCartesian',
                                               'autoScale2d',
                                               'lasso2d',
                                               'select2d',
                                               'zoom2d'
                 ))

方案2：让图例自动换行（适合图例项较多的情况） #

如果图例项太多，即使居中也可能超出宽度，可以设置itemwidth让图例自动换行，并配合边距：

ggplotly(p) %>% 
  plotly::layout(
    xaxis = list(
      title = list(text = "Year", font = list(size = 14, family = "Arial black")),
      tickfont = list(family = "Arial black"),
      tickangle = -45
    ),
    yaxis = list(
      title = list(text = "Number of Patients", font = list(size = 14, family = "Arial black")),
      tickfont = list(family = "Arial black")
    ),
    legend = list(
      orientation = "h",
      y = -.3,   # 稍微下移，给换行的图例留出空间
      x = 0,
      xanchor = "center",
      itemwidth = 100  # 设置每个图例项的宽度，超出后自动换行
    ),
    margin = list(b = 100)  # 进一步增加底部边距
  ) %>% 
  plotly::config(displaylogo = FALSE,
                 modeBarButtonsToRemove = list('hoverClosestCartesian',
                                               'hoverCompareCartesian',
                                               'autoScale2d',
                                               'lasso2d',
                                               'select2d',
                                               'zoom2d'
                 ))

方案3：调整plotlyOutput的高度 #

如果不想调整图例位置，也可以适当增加plotlyOutput的高度，给底部图例留出空间：

output$plotpanel <- renderUI({
  wellPanel(
    plotlyOutput("plotlyObject", height = "500px"),  # 从400px改为500px
    style = "padding: 5px; border-color: darkgray"
  )
})

关键参数说明 #

• legend.xanchor：控制图例相对于x值的对齐方式，设为center可以让图例在x=0时完全居中，避免左偏移导致的超出。
• margin.b：设置绘图区域的底部边距，单位为像素，确保图例有足够的显示空间。
• legend.itemwidth：强制每个图例项的宽度，当总宽度超过绘图区域时，图例自动换行。

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