在R闪亮页面中显示/隐藏侧边栏后,Plot不会调整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 adjusts\nto window resizes but not to\nshow/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 adjusts\nto window resizes but not to\nshow/hide sidepanel!")
  })
}

runApp(shinyApp(ui,server))

如果您使用a 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 adjusts\nto window resizes and to\nshow/hide sidepanel!")
    })
}

runApp(shinyApp(UI,SERVER))