在Shiny中渲染圖形時出現延遲

我有一個 ShinyApp，當我在shinydashboard. 我的圖形包含在 a 中，shiny::box并且當圖形更改大小時總是會發生這種延遲。這是我的可重現應用程式：

library(shiny)
library(shinydashboard)

header <- dashboardHeader(title = "Dashboard", titleWidth = 300)

sidebar <- dashboardSidebar(width = 300, 
                        
                            sidebarMenu(id = "tabs",
                                    
                                        menuItem(text = "Plot", tabName = "plot", icon = icon("chart-pie")) 
                                    
                                        )
                            )

body <- dashboardBody(

  tabItem(tabName = "plot",

  fluidPage(

    column(width = 12, 
       
           box(plotOutput(outputId = "plot1", click = "plot_click"), width = 6, title = 
"Gráfico 1"), 
       
           box(plotOutput(outputId = "plot2", click = "plot_click", width = "75%"), width = 6, title = "Gráfico 2")
       
           ) 
    )
  )

)

ui <- dashboardPage(header, sidebar, body, skin = "blue")

server <- function(input, output) {

  output$plot1 <- renderPlot({

    plot(x = data.frame(x = replicate(n = 1, expr = runif(n = 1, min = 1, max = 7))), 
         xlab = "A", ylab = "B")

  })

  output$plot2 <- renderPlot({

    plot(x = data.frame(x = replicate(n = 1, expr = runif(n = 1, min = 1, max = 7))), 
         xlab = "A", ylab = "B")

  })

}

shinyApp(ui, server)

問題：

圖表 1 在另一個之上前進。這不可能發生。

如何解決這個問題？

uj5u.com熱心網友回復：

如果您在瀏覽器中檢查元素并打開/關閉側邊欄，您將看到影像包含在自動調整大小的 div 隨著視窗的變化而變化，但影像沒有。這是因為影像的寬度是固定的，基于從 R 輸出的影像的大小。例如，您將看到 div 的寬度為：100%;，而 img 的寬度為 515。

您看到的延遲來自切換側邊欄時 Shiny 重新繪制圖形，這就是延遲的原因。要調整影像大小，只需將相同的 css 規則添加到實際影像本身，如下所示：

img {
    width: 100%;
}

當側邊欄被切換時，這將自動調整影像大小。請注意，shiny 仍然重新繪制圖形。

要包含 CSS 樣式，您可以將其放入流體頁面，如下所示：

          fluidPage(
            
            tags$head(
              tags$style(HTML("
      img {
          max-width: 100%;
          }"))
            ),
            
            column(width = 12,
                   box(plotOutput(outputId = "plot1", click = "plot_click"), width = 6, title = "Gráfico 1"), 
                   
                   box(plotOutput(outputId = "plot2", click = "plot_click", width = "75%"), width = 6, title = "Gráfico 2")
                   
            ) 
          )

完整的應用程式：

library(shiny)
library(shinydashboard)

header <- dashboardHeader(title = "Dashboard", titleWidth = 300)

sidebar <- dashboardSidebar(width = 300, 
                            sidebarMenu(id = "tabs",
                                        menuItem(text = "Plot", tabName = "plot", icon = icon("chart-pie"))
                                        )
                            )

body <- dashboardBody(
  tabItem(tabName = "plot",
          fluidPage(
            
            tags$head(
              tags$style(HTML("
      img {
          max-width: 100%;
          }"))
            ),
            
            column(width = 12,
                   box(plotOutput(outputId = "plot1", click = "plot_click"), width = 6, title = "Gráfico 1"), 
                   
                   box(plotOutput(outputId = "plot2", click = "plot_click", width = "75%"), width = 6, title = "Gráfico 2")
                   
            ) 
          )
  )
  
)

ui <- dashboardPage(header, sidebar, body, skin = "blue")

server <- function(input, output) {
  
  output$plot1 <- renderPlot({
    
    plot(x = data.frame(x = replicate(n = 1, expr = runif(n = 1, min = 1, max = 7))), 
         xlab = "A", ylab = "B")
    
  })
  
  output$plot2 <- renderPlot({
    
    plot(x = data.frame(x = replicate(n = 1, expr = runif(n = 1, min = 1, max = 7))), 
         xlab = "A", ylab = "B")
    
  })
  
}

shinyApp(ui, server)

輸出：

標籤：r 闪亮的 闪亮的仪表板

上一篇：動態創建/命名一系列data.frames并將它們系結在一起

下一篇：如何制作帶有標簽和計數的條形圖？