根据shinyDashbord中的窗口大小自动调整绘图大小

Question

我正在使用闪亮的仪表板来制作应用。我想要的是，当你运行这个应用程序时，绘图大小将根据窗口大小自动调整。我已经尝试过此代码，根据窗口大小自动调整绘图的高度和重量。

问题：

绘图的宽度是通过使用以下代码根据应用程序窗口大小更改其大小，但高度不是？

sidebar <- dashboardSidebar(
sidebarMenu(menuItem("plot",tabName = "plot"),
  menuItem("Plot1",tabName = "Plot1"),
)

body <- dashboardBody(
tabitems(
tabItem(tabName = "plot", 
   box( width = "100%" , height = "100%", solidHeader = FALSE, status = "primary",
     plotOutput("plot"))
)
tabItem(tabName = "plot1", 
   box( width = "100%" , height = "100%", solidHeader = FALSE, status = "primary",
     plotOutput("plot1")))

Answer 1

似乎如果在dashboardBody中将框高度初始化为100％它不会重新调整页面大小，为了解决此问题，我们可以从Javascript手动重新调整框大小。

library(shiny)
library(shinydashboard)

ui <-dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
  ),
  dashboardBody(
    tags$head(
      tags$script(
        HTML("
          window.onload = function() {
            resize();
          }
          window.onresize = function() {
            resize();
          }
          Shiny.addCustomMessageHandler ('triggerResize',function (val) {
            window.dispatchEvent(new Event('resize'));
          });
          function resize(){
            var h = window.innerHeight - $('.navbar').height() - 150; // Get dashboardBody height
            $('#box').height(h); 
          }"
        )
      )
    ),
    box( id ="box",
         width  = 12, 
         height = "100%",
         solidHeader = FALSE, 
         status = "primary",
         plotOutput("plot1",inline=F,width="100%",height="100%")
    ),
    actionButton("plot","plot")
  )
)

server <- shinyServer(function(input, output, session) {
  observeEvent(input$plot,{
    session$sendCustomMessage (type="triggerResize", 1)
    output$plot1 <- renderPlot({plot(runif(100),runif(100))})
  })
})

shinyApp(ui = ui, server = server)

或者您可以修改Javascript，如：

HTML("
  $(document).ready(function(){
    resize();
  })
  function resize(){
    var h = window.innerHeight - $('.navbar').height() - 150; // Get dashboardBody height
    $('#box').height(h); 
  }"
    ) # END html

并跳过观察者对Javascript的调用。

这有任何帮助吗？