如何使用R Markdown生成支持多图离散切换的HTML报告

嘿，这个需求其实用Bootstrap的轮播组件就能完美解决！它正好匹配你想要的离散切换、单页固定视图的要求——点击左右箭头或者底部的指示器圆点，就能在三张图之间切换，所有图都固定在同一个位置，方便你对比相邻的绘图。

下面是修改后的完整R Markdown代码，直接编译就能得到你想要的效果：

---
title: "Test multiple plots"
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(htmltools)

Generating multiple plots #

I would like these three plots to be at the same location, and to switch between them by pressing buttons or sliding a scroll bar in the html document.

# 把每个绘图保存为R绘图对象，避免生成外部图片文件
plot1 <- recordPlot({plot(0, pch = 16, col = 1, main = "Plot 1")})
plot2 <- recordPlot({plot(0, pch = 16, col = 2, main = "Plot 2")})
plot3 <- recordPlot({plot(0, pch = 16, col = 3, main = "Plot 3")})

# 将每个绘图转换为可嵌入HTML的元素
plot_items <- list(
  div(class="carousel-item active", renderPlot(plot1)),
  div(class="carousel-item", renderPlot(plot2)),
  div(class="carousel-item", renderPlot(plot3))
)

# 构建Bootstrap轮播组件
tags$div(
  class="carousel slide",
  `data-bs-ride`="carousel",
  # 底部指示器（可选，点击直接切换到对应图）
  tags$div(
    class="carousel-indicators",
    tags$button(type="button", `data-bs-target`="#plotCarousel", `data-bs-slide-to`="0", class="active", aria_current="true", aria_label="Plot 1"),
    tags$button(type="button", `data-bs-target`="#plotCarousel", `data-bs-slide-to`="1", aria_label="Plot 2"),
    tags$button(type="button", `data-bs-target`="#plotCarousel", `data-bs-slide-to`="2", aria_label="Plot 3")
  ),
  # 绘图容器
  tags$div(
    id="plotCarousel",
    class="carousel-inner",
    style="width: 80%; height: 400px; margin: 20px auto;", # 自定义容器大小和位置
    plot_items
  ),
  # 左切换按钮
  tags$button(
    class="carousel-control-prev",
    type="button",
    `data-bs-target`="#plotCarousel",
    `data-bs-slide`="prev",
    tags$span(class="carousel-control-prev-icon", aria_hidden="true"),
    tags$span(class="visually-hidden", "Previous")
  ),
  # 右切换按钮
  tags$button(
    class="carousel-control-next",
    type="button",
    `data-bs-target`="#plotCarousel",
    `data-bs-slide`="next",
    tags$span(class="carousel-control-next-icon", aria_hidden="true"),
    tags$span(class="visually-hidden", "Next")
  )
)

### 关键部分说明：
1. **保存绘图对象**：用`recordPlot()`把每个绘图保存为R的内置绘图对象，不需要生成外部图片文件，让项目更整洁。
2. **Bootstrap轮播组件**：
   - `carousel-inner`是核心容器，每个绘图放在`carousel-item`中，第一个必须添加`active`类作为初始显示的图
   - `carousel-indicators`是底部的圆点指示器，点击可以直接跳转到对应绘图
   - `carousel-control-prev/next`就是你需要的左右切换箭头
3. **自定义样式**：通过`style`参数可以调整轮播容器的大小、位置，比如示例中设置了宽度80%、高度400px并居中，你可以根据需求修改。

因为R Markdown的`html_document`输出默认加载了Bootstrap框架，所以不需要额外引入任何CSS或JS文件，编译后直接就能正常使用。

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