如何获取Quarto Tabset Panel选中标签页名称并动态更新图表

实现思路 #

Quarto的panel-tabset基于Bootstrap标签页实现，我们可以通过JavaScript监听标签页切换事件，将当前激活的标签页ID传递给Shiny输入对象，再在服务器端根据这个值切换对应数据集。

修改后的完整代码 #

---
title: "panel-tabset"
format: dashboard
server: shiny
---

```{r}
#| context: setup
data(trees)
data(mtcars)

Input {.sidebar}
::: panel-tabset
::: {#tab-mtcars}
mtcars
selectInput("axis_x_mtcars",
"axis x",
choices = names(mtcars),
selected = names(mtcars)[1]
)

selectInput("axis_y_mtcars",
"axis y",
choices = names(mtcars),
selected = names(mtcars)[4]
)
:::

::: {#tab-trees}
trees
selectInput("axis_x_trees",
"axis x",
choices = names(trees),
selected = names(trees)[1]
)

selectInput("axis_y_trees",
"axis y",
choices = names(trees),
selected = names(trees)[2]
)
:::
:::

Plot
plotOutput("plot_data")

#| context: server
library(ggplot2)
library(dplyr)

dataset <- reactive({
  active_tab <- input$active_tab
  
  if (active_tab == "tab-mtcars") {
    mtcars %>%
      select(x = .data[[input$axis_x_mtcars]],
             y = .data[[input$axis_y_mtcars]])
  } else {
    trees %>%
      select(x = .data[[input$axis_x_trees]],
             y = .data[[input$axis_y_trees]])
  }
})

output$plot_data <- renderPlot({
  ggplot(dataset(), aes(x, y)) +
    geom_point()
})

// 监听标签页切换，传递激活状态到Shiny
$(document).on('shown.bs.tab', 'a[data-bs-toggle="tab"]', function(e) {
  var activeTabId = $(e.target).attr('href').substring(1);
  Shiny.setInputValue('active_tab', activeTabId);
});

// 初始化时设置默认激活标签页
$(document).ready(function() {
  var initialActiveTab = $('.nav-tabs .active a').attr('href').substring(1);
  Shiny.setInputValue('active_tab', initialActiveTab);
});

## 关键修改说明
- 给每个标签页区块添加唯一ID（`#tab-mtcars`、`#tab-trees`），确保能精准识别激活标签
- 新增JavaScript代码：
  - 监听Bootstrap标签页的切换事件，实时将激活标签ID传给Shiny的`input$active_tab`
  - 页面加载完成后主动传递初始激活标签，避免启动时无数据
- 服务器端通过`input$active_tab`判断当前标签，切换对应数据集；使用`.data[[input$xxx]]`规避dplyr非标准求值问题

内容的提问来源于stack exchange，提问作者Erik De Luca