R / shinyjs:使用功能显示/隐藏侧边栏后,绘图出现在框宽度之外

时间:2017-01-24 09:06:13

标签: r ggplot2 shiny shinydashboard shinyjs

因为几天我试图在使用功能显示/隐藏侧边栏的同时在闪亮的应用程序中找到错误地(超出框宽度)绘图的解决方案。

以下是示例代码:

library(shiny)
library(shinydashboard)
library(ggplot2)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    extendShinyjs(text = 'shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse") }'),
    extendShinyjs(text='shinyjs.showSidebar = function(params) { $("body").removeClass("sidebar-collapse") }'),
    fluidRow(tabsetPanel(id='tabs',
                         tabPanel(value=1,title="Plot1",
                                  fluidRow(
                                    column(12,
                                  plotOutput('plot1', height=800)))),
                         tabPanel(value=2, title="Plot2",
                                  fluidRow(
                                    column(12,
                                  plotOutput('plot2', height=800))))
             )
      )))
  )
)

server <- function(input, output, session) { 
  output$plot1 <- renderPlot({
    out <- ggplot(data.frame(X1=rnorm(1000)),aes(X1))+
      geom_density(fill='light blue')+
      theme_minimal()
    print(out)
  })
  output$plot2 <- renderPlot({
    out <- ggplot(data.frame(X1=rnorm(1000)),aes(X1))+
      geom_density(fill='light blue')+
      theme_minimal()
    print(out)
  })

  observe({
    if (input$tabs == 1) {
      js$hideSidebar()
    }
    else {
      js$showSidebar()
    }
  })
}

shinyApp(ui, server)

正如我们在此示例代码中看到的,我希望在用户打开第二个标签时显示侧边栏(侧栏在input$tabs == 1时折叠)。它工作得很好,除非我按下 tab2,然后返回到tab1并再次返回到tab2 ,图表会调整大小并且x轴被剪切:

enter image description here

2 个答案:

答案 0 :(得分:2)

执行此操作的“hacky”方法是在添加/删除侧边栏时触发窗口调整大小事件,以便在显示/隐藏侧边栏后强制以正确的大小重绘绘图:

extendShinyjs(text = 'shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse"); 
              $(window).trigger("resize"); }'),
extendShinyjs(text='shinyjs.showSidebar = function(params) { $("body").removeClass("sidebar-collapse"); 
              $(window).trigger("resize"); }')

答案 1 :(得分:0)

我没有正确解决此问题,但解决方法是在调用plotOutput()时设置宽度(例如,我尝试width=800)。然后,图的尺寸将被固定,并且(一旦窗口调整到适当的尺寸),图不会被切割。