在R闪亮页面中显示/隐藏侧边栏后，绘图不会调整100%宽度

Question

我在R Shiny中的两个面板页面的主面板中有一个设置为100%宽度(默认值(的绘图。侧边栏可以通过切换操作按钮隐藏。

当侧边栏可见(默认(时，绘图将填充主面板的宽度。当侧边栏被隐藏时，我希望绘图扩展到100%的可用空间，即整个浏览器窗口。但这并没有发生！它保持不变的大小。

library(shiny)
library(shinyBS)
UI <- fluidPage(
    bsButton("showpanel", "Show/hide sidebar", type = "toggle", value = TRUE),
    sidebarLayout(
        conditionalPanel(condition = "input.showpanel == true",
                         sidebarPanel("This is my sidebar.")
                         ),
        mainPanel(plotOutput("plot", width = "100%"))
        )
    )
SERVER <- function(input, output) {
        output$plot <- renderPlot({
        plot(1:10, main = "The width of this plot adjustsnto window resizes but not tonshow/hide sidepanel!")
    })
}
runApp(shinyApp(UI,SERVER))

目前已尝试：

• 如上所述，从UI文件中定义打印对象
• 将服务器文件中的打印对象定义为renderUI对象
• 根据这个问题中的tags$head(tags$style("#myplot{height:100vh !important;}"))在页面中设置CSS标记，将亮图缩放到窗口高度

可能的解决方案：

• 根据切换按钮的状态，使打印宽度动态。然后，我可以使绘图，例如，当侧边栏被隐藏时，140%的宽度。这并不能很好地概括，并且失去了使用fluidPage的适应性的意义

(fluidPage会根据浏览器窗口的大小更改布局。例如，如果您将浏览器窗口设置为手机大小，它会将侧边栏放在主面板上方。(

Answer 1

@konvas的答案真的很好，可能是你不想这样做的方式，但如果你想使用sidebarLayout(为了给出另一个答案(，你可以使用jQuery来切换引导列，比如：

library(shiny)
ui <- fluidPage(
  tags$head(
    tags$script(
      HTML("
            $(document).ready(function(){
              // Mark columns we want to toggle
              $('body').find('div [class=col-sm-4]').addClass('sidebarPanel');
              $('body').find('div [class=col-sm-8]').addClass('mainPanel');
            })

            Shiny.addCustomMessageHandler ('resize',function (message) {
              $('.sidebarPanel').toggle();
              $('.mainPanel').toggleClass('col-sm-8 col-sm-12');
              $(window).trigger('resize')
            });
           ")
    )
  ),
  actionButton("showpanel", "Show/hide sidebar"),
  sidebarLayout(
    sidebarPanel("This is my sidebar."),
    mainPanel(plotOutput("plot", width = "100%"))
  )
)
server <- function(input, output, session) {
  observeEvent(input$showpanel,{
    session$sendCustomMessage(type = 'resize', message = 1)
  })
  output$plot <- renderPlot({
    plot(1:10, main = "The width of this plot adjustsnto window resizes but not tonshow/hide sidepanel!")
  })
}
runApp(shinyApp(ui,server))

如果在fluidRow或类似的文件中使用列，同样的方法也适用。

Answer 2

实现这一点的一种方法是使用反应式布局(这方面有很多问题，例如在具有光泽的反应式布局之间切换(。在你的情况下，这将是类似的东西

library(shiny)
library(shinyBS)
UI <- shinyUI(
        fluidPage(
            bsButton("showpanel", "Show/hide sidebar", type = "toggle", value = TRUE),
            uiOutput('ui')
        )
    )
SERVER <- function(input, output) {
    output$ui <- renderUI({
        if (input$showpanel) {
            sidebarLayout(
                sidebarPanel("This is my sidebar."),
                mainPanel(plotOutput('plot'))
            )
        } else {
            plotOutput('plot')
        }
    })
    output$plot <- renderPlot({
        plot(1:10, main = "The width of this plot adjustsnto window resizes and tonshow/hide sidepanel!")
    })
}
runApp(shinyApp(UI,SERVER))