javascript - 在 Shiny 的可滚动框中自动调整绘图大小

Question

我正在尝试在一个 Shiny 的应用程序中将一个情节放在一个盒子里。情节的大小发生变化，所以目前我正在定义盒子的高度，这不是解决方案。我想要一个垂直滚动的绘图，它自动调整其宽度和框高度等于窗口的高度。

这是我试过的:

library(shiny)
library(shinydashboard)

ui <-dashboardPage(
  dashboardHeader(),
  dashboardSidebar(sidebarMenu(
    menuItem("Box Plot", tabName = "boxplot")
  )),
  dashboardBody(
    tabItems(tabItem(tabName = "boxplot",
                     fluidPage(fluidRow(column(4),
                                        column(8, box(title = "Box Plot", width = NULL,
                                                     solidHeader = TRUE, status = "primary", collapsible = TRUE,
                                                     plotOutput("plot1", inline=F, width="100%", height=1500), style = 'overflow-y: scroll;')
                                               )))))))

server <- shinyServer(function(input, output, session) {
  output$plot1 <- renderPlot({
    x <- data.frame(matrix(rnorm(1000), ncol = 20))
    input_data <- rnorm(ncol(x))
    d <- data.frame(x)
    plot.data <- gather(d, variable, value)
    plot.data$test_data <- as.numeric(rep(input_data, each = nrow(x)))

    p = ggplot(plot.data, aes(x = 0,  y=value)) + 
      geom_boxplot()  + 
      geom_point(aes(x = 0, y = test_data), color = "red") + 
      facet_wrap(~variable, scales = "free_y", switch = "y", nrow = 1) +
      xlab("") + ylab("") +
      theme(legend.position="none") + theme_bw() + theme(axis.text.x=element_blank(),
                                                         axis.text.y=element_text(angle=90),
                                                         axis.ticks.x=element_blank())

    print(p, vp=viewport(angle=270,  width = unit(3, "npc"), height = unit(0.32, "npc")))
  })
})

shinyApp(ui = ui, server = server)

Answer 1

这个在我的机器上看起来不错。

library(shiny)
library(shinydashboard)
library(tidyr)

ui <-dashboardPage(
  dashboardHeader(),
  dashboardSidebar(sidebarMenu(
    menuItem("Box Plot", tabName = "boxplot")
  )),
  dashboardBody(
    tabItems(tabItem(tabName = "boxplot",
                     fluidPage(fluidRow(column(4),
                                        column(8, box(title = "Box Plot", width = NULL,
                                                      solidHeader = TRUE, status = "primary", collapsible = TRUE,
                                                      plotOutput("plot1", inline=F, width="100%", height=1500), style = 'display:block;width:100%;height:85vh;overflow-y: scroll;')
                                        )))))))

server <- shinyServer(function(input, output, session) {
  output$plot1 <- renderPlot({
    x <- data.frame(matrix(rnorm(1000), ncol = 20))
    input_data <- rnorm(ncol(x))
    d <- data.frame(x)
    plot.data <- gather(d, variable, value)
    plot.data$test_data <- as.numeric(rep(input_data, each = nrow(x)))

    p = ggplot(plot.data, aes(x = 0,  y=value)) + 
      geom_boxplot()  + 
      geom_point(aes(x = 0, y = test_data), color = "red") + 
      facet_wrap(~variable, scales = "free_y", switch = "y", nrow = 1) +
      xlab("") + ylab("") +
      theme(legend.position="none") + theme_bw() + theme(axis.text.x=element_blank(),
                                                         axis.text.y=element_text(angle=90),
                                                         axis.ticks.x=element_blank())

    print(p, vp=viewport(angle=270,  width = unit(3, "npc"), height = unit(0.32, "npc")))
  })
})

shinyApp(ui = ui, server = server)

• 我创建了一个只有 CSS 的解决方案，视口(viewport)高度为 85% according to this post .
• 由于您的流动网格列，此处不可能有 100% 的宽度。
• 如上所述，您可以考虑使用 JavaScript/jQuery 进行高级调整，尤其是对于较旧的浏览器。
• 另外，我在这里添加了必要的 tidyr 包。