Rシャイニーページでサイドバーを表示/非表示にした後、プロットの幅を100％に変更しない

Question

Rシャイニーの2パネルページのメインパネルで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オブジェクトとしてプロットオブジェクトを定義します。
• Scaling shiny plots to window heightのtags$head(tags$style("#myplot{height:100vh !important;}"))ページのCSSタグを設定します。

の回避策：

• はプロットの幅がダイナミックでトグルボタンの状態に応じて行います。私はプロットを作ることができます。サイドバーが隠れているときの幅は140％です。これはよく一般化されるものではなく、適合性を使用する点は失われますfluidPage。

（fluidPageは、ブラウザのウィンドウサイズに依存レイアウトを変更します。たとえば、あなたは携帯電話の大きさについてのあなたのブラウザのウィンドウを作る場合、それはメインパネル上のサイドバーを配置します。）

Answer 1

これを行う1つの方法は、反応レイアウトを使用することです（これには多くの質問があります（例：Switch between layouts reactively with shiny）。答え@konvas

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

ようなものになるだろうあなたのケースでは、おそらくあなたがこれを行うためにwan'tていますがsidebarLayout（および別の答えを与えるために）を使用する場合の方法は本当に良いですし、あなたがfluidRowまたは類似した何かで列を使用する場合と同じ方法論が適用される

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

：あなたは次のようにブートストラップ列を切り替えるにはjQueryのを使用することができます。