R语言Plotly多色网格背景图表叠加及悬停日期显示问题

问题1：实现多色背景与前景图表的正确叠加 #

要让多色背景在底层、前景图表在上，核心是控制Plotly的图层顺序——先添加背景元素，再添加前景的各类数据trace：

1. 用add_shape()批量添加多色背景区间
   如果你用矩形区间做背景，先初始化空图，再循环添加所有背景形状：

   # 创建空图
   p <- plot_ly()
   # 假设bg_df是存储背景区间的数据框，包含x0(起始id)、x1(结束id)、color(背景色)列
   for (i in 1:nrow(bg_df)) {
     p <- p %>% add_shape(
       type = "rect",
       x0 = bg_df$x0[i], x1 = bg_df$x1[i],
       y0 = -Inf, y1 = Inf,
       fillcolor = bg_df$color[i],
       opacity = 0.2,  # 调透明度避免遮挡前景数据
       layer = "below"  # 强制把背景放在所有数据trace下方
     )
   }
   

2. 叠加前景数据trace
   在背景图的基础上，依次添加置信区间、预测值、真实值的trace：

   # 添加真实值折线
   p <- p %>% add_lines(data = df, x = ~id, y = ~actual, name = "真实值")
   # 添加预测值虚线
   p <- p %>% add_lines(data = df, x = ~id, y = ~pred, name = "预测值", line = list(dash = "dash"))
   # 添加置信区间带
   p <- p %>% add_ribbons(data = df, x = ~id, ymin = ~lower_ci, ymax = ~upper_ci, name = "置信区间", opacity = 0.3)
   

   这种方式完全替代plot_bgcolor，实现背景与前景的分层效果。

问题2：悬停时显示date列（X轴保留id显示） #

直接在添加trace时自定义hover内容，两种简单实现方式：

方式1：用hovertext指定日期 #

添加每个前景trace时，绑定hovertext为date列，再通过hoverinfo控制显示内容：

p <- p %>% add_lines(
  data = df,
  x = ~id, y = ~actual,
  hovertext = ~date,
  hoverinfo = "text+y",  # 显示日期和对应y值
  name = "真实值"
)

方式2：自定义hover模板（更灵活） #

用hovertemplate完全定制弹窗内容，把date传入customdata供模板调用：

p <- p %>% add_lines(
  data = df,
  x = ~id, y = ~actual,
  hovertemplate = paste(
    "日期: %{customdata}<br>",
    "真实值: %{y}<br>",
    "ID: %{x}<extra></extra>"
  ),
  customdata = ~date,
  name = "真实值"
)

这样X轴仍显示id，鼠标悬停时弹窗会展示对应的date值。

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