shiny dashboard点击actionButton后展示box组件的实现问题

实现思路 #

默认隐藏承载图表的Box组件，通过监听actionButton的点击事件触发组件的显示逻辑，避免用户看到空框。 #

方案1：原生conditionalPanel实现（无需额外安装依赖） #

直接用Shiny自带的条件面板组件，通过判断按钮点击次数控制显示：

核心修改点 #

• 将原有的Box外层包裹conditionalPanel，设置触发条件为input.go > 0（按钮点击次数大于0时显示）

完整可运行代码 #

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = tags$body(class="skin-blue sidebar-mini control-sidebar-open",dashboardPage(
    options = list(sidebarExpandOnHover = TRUE),
    header = dashboardHeader(title = "Investment Advisor Monitoring - Insider Trading",titleWidth = 450),
    
    sidebar = dashboardSidebar(minified = F, collapsed = F,
                               actionButton("go", "Go"),
                               numericInput("n", "n", 50)
    ),
    body = dashboardBody(
      # 加条件面板，仅点击go按钮后显示
      conditionalPanel(
        condition = "input.go > 0",
        box(
          title = "StockPrice Reaction Around The Event Date", status = "primary", solidHeader = TRUE,
          collapsible = TRUE,
          plotOutput("plot")
        )
      )
    ),
    title = "DashboardPage"
  )),
  server = function(input, output) { 
    
    randomVals <- eventReactive(input$go, {
      runif(input$n)
    })
    
    output$plot <- renderPlot({
      hist(randomVals())
    })
  }
)

方案2：使用shinyjs实现（灵活度更高，支持后续动态隐藏） #

如果后续需要支持再次点击隐藏等交互，可以用shinyjs包实现更灵活的控制：

核心修改点 #

• 加载shinyjs包，ui中引入useShinyjs()
• 给Box设置hidden()属性，默认隐藏
• server中监听go按钮点击事件，触发show()方法显示Box

完整可运行代码 #

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyjs) # 引入shinyjs

shinyApp(
  ui = tags$body(class="skin-blue sidebar-mini control-sidebar-open",dashboardPage(
    options = list(sidebarExpandOnHover = TRUE),
    header = dashboardHeader(title = "Investment Advisor Monitoring - Insider Trading",titleWidth = 450),
    
    sidebar = dashboardSidebar(minified = F, collapsed = F,
                               actionButton("go", "Go"),
                               numericInput("n", "n", 50)
    ),
    body = dashboardBody(
      useShinyjs(), # 初始化shinyjs
      # 默认隐藏box
      hidden(
        box(
          id = "plot_box", # 给box加id便于控制
          title = "StockPrice Reaction Around The Event Date", status = "primary", solidHeader = TRUE,
          collapsible = TRUE,
          plotOutput("plot")
        )
      )
    ),
    title = "DashboardPage"
  )),
  server = function(input, output) { 
    # 监听点击事件，显示box
    observeEvent(input$go, {
      show("plot_box")
    })
    
    randomVals <- eventReactive(input$go, {
      runif(input$n)
    })
    
    output$plot <- renderPlot({
      hist(randomVals())
    })
  }
)

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