Grafik, R parlak sayfasındaki göster/gizle kenar çubuğundan sonra% 100 genişlik boyutunu yeniden boyutlandırmıyor

Question

R Shiny'ta iki panelli bir sayfanın ana panelinde% 100 genişliğe (varsayılan) ayarlanmış bir çizimim var. Kenar çubuğu bir geçiş eylem düğmesiyle gizlenebilir.

Kenar çubuğu görünür olduğunda (varsayılan), grafik ana panelin genişliğini doldurur. Kenar çubuğu gizlendiğinde, arsa artık kullanılabilir alanın% 100'ünü, yani tüm tarayıcı penceresini doldurmak için genişletmeyi istiyorum. Ama bu olmaz! Aynı büyüklüğü koruyor.

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)) 

bugüne kadar çalışıldı:

• yukarıdaki gibi UI dosyası içinden arsa nesneyi tanımlama.
• Grafik nesnesini, render dosyasından bir renderUI nesnesi olarak tanımlamak.
• CSS etiketini tags$head(tags$style("#myplot{height:100vh !important;}")) numaralı sayfaya göre bu sorudan, Scaling shiny plots to window height olarak ayarlayın.

Olası alternatif çözüm:

• dinamik ve geçiş butonu durumuna bağlı olarak arsa genişliğini olun. Sonra arsa yapabilirim, ör. Kenar çubuğu gizlendiğinde% 140 genişlik. Bu iyi genelleme yapmaz ve fluidPage'un uyumluluğunu kullanma noktasını kaybeder.

(fluidPage tarayıcı penceresi boyutu bağımlı düzenini değiştirir. Örneğin, bir cep telefonu büyüklüğünde tarayıcı penceresini yaparsanız, ana panelin üstünde kenar çubuğu yerleştirir.)

Answer 1

Bunu yapmanın bir yolu, reaktif bir düzen kullanmaktır (bu konuda birçok soru vardır (örneğin, Switch between layouts reactively with shiny). Senin durumunda bu bunu yapmak için wan't ama sidebarLayout kullanmak istiyorsanız

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)) 

Answer 2

@konvas cevap gibi bir şey gerçekten iyi ve muhtemelen yoludur olurdu (ve başka bir yanıt verme uğruna) Eğer benzer bir fluidRow falan sütunları kullanın eğer geçerli olacak

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)) 

aynı metodoloji: sizin gibi önyükleme sütunları geçiş yapmak için jQuery kullanabilirsiniz.