3

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

问题 ：

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

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")))
4

1 回答 1

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 的调用。

这有什么帮助吗？

于 2015-10-13T19:04:24.087 回答