如何在flexdashboard中用同一数据集上下展示两个独立图表

核心实现思路 #

通过Shiny交互控件控制图表显示状态，同时让两个图表共享同一输入变量，各自独立渲染：

• 用checkboxGroupInput提供图表选择开关，支持单独/同时显示图表
• 用conditionalPanel根据选择结果动态渲染对应图表
• 两个图表的渲染逻辑共享同一输入变量，保持数据同步

完整代码示例 #

---
title: "双图表可控显示"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
library(ggplot2)

侧边栏 {.sidebar} #

# 共享输入控件：选择数据集
selectInput("dataset", "选择数据集:",
            choices = c("iris", "mtcars"))

# 图表显示选择开关
checkboxGroupInput("show_plots", "显示图表:",
                   choices = c("散点图", "箱线图"),
                   selected = c("散点图", "箱线图"))

主面板 #

图表区域 #

# 散点图：根据选择动态显示
conditionalPanel(
  condition = "input.show_plots.includes('散点图')",
  renderPlot({
    data <- get(input$dataset)
    if(input$dataset == "iris"){
      ggplot(data, aes(Sepal.Length, Sepal.Width)) + 
        geom_point(color = "#2c3e50") + 
        ggtitle("鸢尾花萼片长宽散点图") +
        theme_minimal()
    } else {
      ggplot(data, aes(wt, mpg)) + 
        geom_point(color = "#e74c3c") + 
        ggtitle("汽车重量与油耗散点图") +
        theme_minimal()
    }
  })
)

# 箱线图：根据选择动态显示
conditionalPanel(
  condition = "input.show_plots.includes('箱线图')",
  renderPlot({
    data <- get(input$dataset)
    if(input$dataset == "iris"){
      ggplot(data, aes(Species, Petal.Length)) + 
        geom_boxplot(fill = "#3498db") + 
        ggtitle("鸢尾花花瓣长度箱线图") +
        theme_minimal()
    } else {
      ggplot(data, aes(as.factor(cyl), hp)) + 
        geom_boxplot(fill = "#9b59b6") + 
        ggtitle("汽车气缸数与马力箱线图") +
        theme_minimal()
    }
  })
)

### 关键细节说明
1. **启用Shiny运行时**：必须在YAML头部添加`runtime: shiny`，否则交互控件无法生效
2. **共享输入同步**：两个图表的渲染代码都调用`input$dataset`，确保数据来源一致
3. **显示逻辑控制**：`conditionalPanel`使用JavaScript表达式`input.show_plots.includes('图表名称')`判断是否渲染，语法要匹配选项文本
4. **布局适配**：flexdashboard的`vertical_layout: fill`会让图表自动填充可用空间，也可以通过`columns`语法调整双图并列/上下布局

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