如何在R Shiny中通过pickerInput切换Plotly图表？

核心思路 #

通过动态UI渲染，根据图表类型选择器的结果，只显示对应类型的图表输出组件，同时保留原有图表的渲染逻辑。

修改步骤及代码实现 #

1. 调整UI模块：替换静态图表为动态容器

将原UI中同时显示的两个plotlyOutput替换为一个uiOutput，用于动态加载选中的图表：

mod_page_ui <- function(id) {
  ns <- NS(id)
  
  tabItem(
    tabName = "chart_page",
    
    fluidPage(
      fluidRow(
        column(12, ),
        
        fluidRow(column(12, tabsetPanel(
          tabPanel("Value Chart ", fluidRow(
            column(
              2,
              align = "center",
              
              h3("Filter Chart"),
              pickerInput(
                inputId  = ns("selectType"),
                label    = "Select Type to View",
                choices  = c("TypeA", "TypeB"),
                selected = "TypeA",  # 设为单选默认值
                multiple = FALSE      # 改为单选模式，符合切换需求
              ),
              
              uiOutput(ns("attributePicker"))
            ),
            column(10,  # 调整列宽避免布局重叠
                   tabsetPanel(tabPanel(
                     "chart Panel ",
                     # 动态图表容器
                     uiOutput(ns("dynamic_chart"))
                   ))))))))
}

2. 更新Server模块：添加动态渲染逻辑

保留原有两个图表的渲染代码，新增renderUI监听选择器，动态输出对应图表：

mod_page_charts <- function(input, output, session) {
  ns <- session$ns
  
  options(scipen = 100, digits = 4)
  
  output$attributePicker <- renderUI({
    if (input$selectType == "TypeA") {
      pickerInput(
        inputId  = ns("selectedTypeA"),
        label    = "Select Category to View",
        choices  = c("Daily", "Weekly"),
        selected = c("Daily", "Weekly"),
        multiple = TRUE,
        options  = list(size = 5)
      ) 
      
    } else if (input$selectType == "TypeB") {
      pickerInput(
        inputId  = ns("selectedTypeB"),
        label    = "Select Category to View",
        choices  = c("Daily", "Weekly"),
        selected = c("Daily", "Weekly"),
        multiple = TRUE,
        options  = list(size = 5)
      )
    }
  })
  
  # TypeA图表渲染逻辑
  output$TypeA_Chart <- renderPlotly({
    plt <-  generate_plot_typeA(
      data = datatypeA,
      attributeID = input$selectedTypeA,  # 改用对应子筛选器的输入
      x = `Dates`,
      y = `Values`,
      title = "Type-A Chart"
    )
    plt
  })
  
  # TypeB图表渲染逻辑
  output$TypeB_Chart <- renderPlotly({
    plt <- generate_plot_typeB(
      data = datatypeB,
      attributeID = input$selectedTypeB,  # 改用对应子筛选器的输入
      x = `Dates`,
      y = `Values`,
      title = "Type-B Chart"
    )
    plt
  })
  
  # 动态切换显示对应图表
  output$dynamic_chart <- renderUI({
    switch(input$selectType,
           "TypeA" = plotlyOutput(ns("TypeA_Chart")),
           "TypeB" = plotlyOutput(ns("TypeB_Chart")))
  })
}

额外说明 #

• 调整了图表列宽度为10，避免与左侧2列的筛选栏布局冲突；
• 修正了原图表渲染中attributeID的参数，改用对应类型的子筛选器输入，确保图表能根据子分类筛选更新；
• 选择器改为单选模式后，每次切换都会联动更新子筛选器和显示的图表，实现完整的动态效果。

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