Wie man Merkblatt für R verwenden 100% Shiny dashboard Höhe
Ich bin in den Prozess der erstellen eine Glänzende dashboard-Anwendung, wo das dashboard Körper soll zeigen, einige Karten. So weit kein problem, um die Karte zu erweitern über die gesamte Breite des Körpers, aber es ist irgendwie nicht bereit, zu regulieren, um die volle Höhe.
Die Broschüre selbst ist bereits zu 100% der Höhe ist, aber es nicht tun, der trick. Sobald ich das height-Attribut für die leafletOutput der Packungsbeilage Objekt nicht zeigen, und ich bin Links mit einem leeren Feld.
Den code finden Sie unten:
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)
Du musst angemeldet sein, um einen Kommentar abzugeben.
Fand ich persönlich, dass die Einstellung der Höhe relativ zur Fenstergröße ist befriedigender. Höhe als Prozentsatz der nicht funktioniert, da die dashboardBody hat undefinierten Höhe. Aber relativ zum gesamten Dokument ist okay.
100% der dashoboardBody macht 100vh (ccs3-Einheit) minus-header (mindestens 50px) minus dashboardBody Polsterung (2* 15px).
So, legen Sie die Höhe zu 100vh - 80px und Sie sollten in Ordnung sein.
Da shiny nicht unterstützt css3-Einheiten, diese werden direkt auf das Dokument, wie im code unten.
Spaß haben!
Versuchen Sie, die Pixelgröße manuell:
Box
können Sietags$style(type = "text/css", ".box-body {height:80vh}"),
und dannleafletOutput("l_watershed",width="100%",height="100%")
tags$style(type = "text/css", ".box-body {height:80vh}")
hilft und gibt die Lösung! DankEine weitere option ist das, was jcheng5 und kent37 beschrieben haben, auf GitHub
Funktioniert bei mir mit einem
leaflet map
imR flexdashboard
Th
vh
Einheit funktioniert nicht für einige ältere mobile browser. Diese css-unten sollte funktionieren für computer und mobile.