Plotly子图重叠问题求助（R语言，flexdashboard导出HTML）

当子图数量较多（如61个）时，Plotly默认布局高度无法适配，加上Flexdashboard的填充式布局特性，会导致子图挤压重叠。以下是具体解决方法：

关键修改点 #

• 给每个子图设置固定高度，缩小内部边距节省空间
• 在subplot中指定高度分配比例，关闭共享坐标轴避免布局计算冲突
• 调整整体布局高度，配合Flexdashboard的滚动特性展示所有子图

修改后的完整代码 #

set.seed(123)

# 61 unique IDS
ids <- c(letters, LETTERS, paste0('id', 1:9))

df <- data.frame(
  ID = rep(ids, each = 5),
  HOUR = rep(1:5, times = length(ids)),
  ARRIVALS = sample(1:50, size = 5*length(ids), replace = TRUE)
)

# 生成带布局设置的子图
plots <- lapply(unique(df$ID), function(var) {
  loc_df <- df[df$ID == var,]
  plot_ly(loc_df, x = ~HOUR, y = ~ARRIVALS, type="scatter", mode="line") %>%
    layout(
      height = 100,  # 单个子图固定高度100px
      xaxis = list(title = "", showticklabels = TRUE),  # 隐藏x轴标题，保留刻度
      yaxis = list(title = "", showticklabels = TRUE),  # 隐藏y轴标题，保留刻度
      margin = list(l=30, r=10, t=20, b=10)  # 缩小子图内部边距
    )
})

# 组合子图并调整整体布局
subplot(plots, 
        nrows = length(plots), 
        heights = rep(1/length(plots), length(plots)),  # 每个子图高度占比均等
        shareX = FALSE, shareY = FALSE,
        margin = 0.005) %>%  # 子图间的微小间距
  layout(
    height = length(plots)*110,  # 整体高度预留少量间距
    showlegend = FALSE  # 隐藏重复图例
  )

配合Flexdashboard滚动设置 #

在Rmd文件的YAML头部添加vertical_layout: scroll，让页面自动支持垂直滚动，完整展示所有子图：

---
title: "纵向子图展示"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: scroll
---

可选优化：自定义滚动容器 #

如果需要更灵活的控制，可以添加自定义CSS，将子图放在可滚动容器中：

<style>
.scrollable-chart {
  max-height: 90vh;
  overflow-y: auto;
  padding: 10px;
}
</style>

然后将子图代码包裹在容器中：

tags$div(class="scrollable-chart",
         subplot(plots, nrows = length(plots), heights = rep(1/length(plots), length(plots)), shareX = FALSE, shareY = FALSE, margin = 0.005) %>% layout(height = length(plots)*110, showlegend = FALSE))

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