如何在Quarto HTML文档中切换Plotly图表与DT数据表视图？

云上老周

2026-8-20

Quarto HTML实现图表与表格视图切换的最优方案

方案一：用Quarto原生标签页组件（最简洁高效）

Quarto的HTML格式默认支持Bootstrap标签页，直接用内置语法就能实现切换，无需额外代码，兼容性拉满。

代码示例：

---
title: "图表表格切换示例"
format: html
---

::: {.tabset}
## 图表视图
```{r}
library(plotly)
# 生成Plotly图表
plot_ly(mtcars, x = ~wt, y = ~mpg, type = "scatter", mode = "markers")

表格视图

# 生成交互式表格
DT::datatable(mtcars)

:::

- 效果：渲染后会生成两个标签，默认显示第一个标签内容，点击标签即可切换视图，自动隐藏未选中的内容。
- 优势：零额外依赖，代码少易维护，完全适配Quarto的HTML输出逻辑。

### 方案二：自定义按钮+JS控制（适合个性化需求）
如果不满意默认标签页的样式，可自定义按钮和切换逻辑，用简单的JS和CSS实现更灵活的控制。

代码示例：
```qmd
---
title: "自定义切换按钮示例"
format: html
---

```{js}
// 切换视图的核心函数
function toggleView(target) {
  // 隐藏所有视图容器
  document.querySelectorAll('.view-box').forEach(el => el.style.display = 'none');
  // 显示目标视图
  document.getElementById(target).style.display = 'block';
  // 更新按钮激活状态
  document.querySelectorAll('.toggle-btn').forEach(btn => btn.classList.remove('active'));
  document.querySelector(`[data-target="${target}"]`).classList.add('active');
}

```{r} library(plotly) plot_ly(mtcars, x = ~wt, y = ~mpg, type = "scatter", mode = "markers") ```

``` - 效果：点击按钮切换对应视图，同时按钮会高亮当前选中状态，样式可根据需求修改CSS调整。 - 优势：完全自定义外观和交互逻辑，适合需要匹配特定页面风格的场景。