web-dev-qa-db-fra.com

Comment obtenir le dépliant pour R utiliser 100% de la hauteur du tableau de bord brillant

Je suis en train de créer une application de tableau de bord Shiny, où le corps du tableau de bord est censé afficher des cartes. Jusqu'à présent, aucun problème pour que la carte ne s'étende sur toute la largeur du corps, mais elle n'est en quelque sorte pas disposée à s'adapter à toute la hauteur. enter image description here

Le dépliant lui-même est déjà réglé pour couvrir 100% de la hauteur, mais il ne fait pas l'affaire. Dès que j'utilise l'attribut height pour le leafletOutput, l'objet leaflet ne s'affiche pas du tout, et je me retrouve avec une boîte vide.

Le code se trouve ci-dessous:

library(shinydashboard)
library(leaflet)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(
    sidebarMenu(
      menuItem(
        "Maps", 
        tabName = "maps", 
        icon = icon("globe"),
        menuSubItem("Watersheds", tabName = "m_water", icon = icon("map")),
        menuSubItem("Population", tabName = "m_pop", icon = icon("map"))
      ),
      menuItem(
        "Charts", 
        tabName = "charts", 
        icon = icon("bar-chart"),
        menuSubItem("Watersheds", tabName = "c_water", icon = icon("area-chart")),
        menuSubItem("Population", tabName = "c_pop", icon = icon("area-chart"))
      )
    )
  ),
  dashboardBody(
    tabItems(
      tabItem(
        tabName = "m_water",
        box(
          title = "Baltic catchment areas",
          collapsible = TRUE,
          width = "100%",
          height = "100%",
          leafletOutput("l_watershed")
        )
      ),
      tabItem(
        tabName = "m_pop",
        # Map in Dashboard
        leafletOutput("l_population")
      ),
      tabItem(
        tabName = "charts",
        h2("Second tab content")
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)

  output$l_watershed <- renderLeaflet({
    leaflet(height = "100%") %>% addTiles() %>% setView(19.08, 60.25, zoom = 4) %>%addWMSTiles(
      "http://62.236.121.188/arcgis/services/DataAndMaps/Background/MapServer/WMSServer?",
      layers = "11",
      options = WMSTileOptions(
        format = "image/png",
        transparent = TRUE
      ),
      attribution = "Catchment area provided by HELCOM"
    )
  })

  output$l_population <- renderLeaflet({
    leaflet(height = "100%") %>% addTiles() %>% setView(19.08, 60.25, zoom = 4) %>%addWMSTiles(
      "http://62.236.121.188/arcgis/services/DataAndMaps/Background/MapServer/WMSServer?",
      layers = "17",
      options = WMSTileOptions(
        format = "image/png",
        transparent = TRUE
      ),
      attribution = "Population data provided by HELCOM"
    )
  })
}

shinyApp(ui, server)
rshinyleafletshinydashboard
42
TomGeo

Personnellement, j'ai trouvé que le réglage de la hauteur par rapport à la taille de la fenêtre est plus satisfaisant. La hauteur en pourcentage ne fonctionne pas, car le dashboardBody a une hauteur indéfinie. Mais par rapport à l'ensemble du document, ça va.

100% du tableau de bordBody fait 100vh (unité ccs3) moins en-tête (minimum 50px) moins padboardBody padding (2 * 15px).

Donc, réglez la hauteur sur 100vh - 80px et tout devrait bien se passer.

Puisque shiny ne prend pas en charge les unités css3, cela doit être inclus directement dans le document, comme dans le code ci-dessous.

library(shiny)
library(shinydashboard)
library(leaflet)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$style(type = "text/css", "#map {height: calc(100vh - 80px) !important;}"),
    leafletOutput("map")
  )
)

server <- function(input, output) {
  output$map <- renderLeaflet({
    leaflet() %>% addTiles() %>% setView(42, 16, 4)
  })
}

runApp(shinyApp(ui, server), launch.browser = TRUE)

S'amuser!

56
K. Rohde

Une autre option est ce que jcheng5 et kent37 ont décrit sur GitHub

output$mymap = renderLeaflet({...make a map...})
leafletOutput('mymap', height=1000)

Fonctionne pour moi avec un leaflet map dans R flexdashboard

3
Banshae

Essayez d'ajouter manuellement la taille des pixels:

...
  dashboardBody(
    tabItems(
      tabItem(
        tabName = "m_water",
        box(
          title = "Baltic catchment areas",
          collapsible = TRUE,
          width = "100%",
          height = "1000px",
          leafletOutput("l_watershed",width="100%",height="1000px")
        )
      ),
      tabItem(
        tabName = "m_pop",
        # Map in Dashboard
        leafletOutput("l_population",width="100%",height="1000px")
      ),
      tabItem(
        tabName = "charts",
        h2("Second tab content")
      )
    )
  )
...
3
Pork Chop

L'unité vh ne fonctionne pas pour certains anciens navigateurs mobiles. Ce css ci-dessous devrait fonctionner pour ordinateur et mobile.

/* for computer */
div.outer {
     height: calc(100vh - 80px);
     padding: 0;
     margin: 0;
     min-height: 500px
}

@media all and (max-width:768px){
/* for mobile */
div.outer  {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  padding: 0;
}
}
1
Bangyou