首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在R闪亮页面中显示/隐藏侧边栏后,绘图不会调整100%宽度

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

Stack Overflow用户
提问于 2015-10-01 21:13:02
回答 2查看 2.2K关注 0票数 18

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

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

代码语言:javascript
复制
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对象。

中的

  • 在页面中设置CSS标记

可能的解决方法:

  • 根据切换按钮的状态动态地设置绘图的宽度。然后我可以让绘图,例如140%的宽度时,侧边栏是隐藏的。这不能很好地概括,并且失去了使用fluidPage.

的适应性的要点。

(fluidPage会根据浏览器窗口的大小更改布局。例如,如果您将浏览器窗口设置为移动电话大小,则会将侧边栏放在主面板的上方。)

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-10-29 20:25:57

要做到这一点,一种方法是使用响应式布局(在这方面有很多问题,例如Switch between layouts reactively with shiny)。在您的情况下,应该是这样的

代码语言:javascript
复制
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))
票数 7
EN

Stack Overflow用户

发布于 2015-10-30 04:57:53

@konvas answer非常好,可能你不想这样做,但如果你想使用sidebarLayout (为了给出另一个答案),你可以使用jQuery来切换引导列,如下所示:

代码语言:javascript
复制
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))

如果在fluidRow或类似的东西中使用列,同样的方法也适用。

票数 8
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32888519

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档