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

时间:2016-10-05 12:24:26

标签: javascript html css 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)

1 个答案:

答案 0 :(得分: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的解决方案,其视口高度为according to this post
  • 由于您的流体网格柱,此处无法实现100%的宽度。
  • 如上所述,您可以考虑使用JavaScript / jQuery进行高级调整,尤其是对于旧版浏览器。
  • 另外,我在这里添加了tidyr包。

enter image description here