Как использовать fillPage в Shiny Dashboard - PullRequest
0 голосов
/ 08 мая 2018

Я не могу заставить карту отображаться в полноэкранном режиме с Shiny in R. Любая помощь будет принята с благодарностью.

Я поиграл с многочисленными вариациями высоты = "100%" и высоты = "авто" как на стороне пользовательского интерфейса, так и на стороне сервера. Они были опробованы в функциях fillPage, fillCol, fillRow, outputPlot и renderPlot.

Я могу что-то форсировать, если использую height = "400px" и т. Д., Но в целом это ничего не дает при перемещении приборной панели с экрана ноутбука, например, на что-то побольше и т. Д.

Я предоставил код для упрощенной версии. Он содержит стили CSS, которые есть в моей «реальной» версии, так как я понимаю, что CSS также может влиять на код R.

library(shiny)
library(shinydashboard)
library(ggplot2)

ui <- dashboardPage(
  dashboardHeader(title = "SOS"),
  dashboardSidebar(
    br()
  ),
  dashboardBody(tags$body(tags$style(HTML('
                              /* logo */
                                          .skin-blue .main-header .logo {
                                          background-color: #0a22d8;
                                          }

                                          /* logo when hovered */
                                          .skin-blue .main-header .logo:hover {
                                          background-color: #8390ef;
                                          }

                                          /* navbar (rest of the header) */
                                          .skin-blue .main-header .navbar {
                                          background-color: #0a22d8;
                                          }        

                                          /* main sidebar */
                                          .skin-blue .main-sidebar {
                                          background-color: #0a22d8;
                                          }

                                          /* active selected tab in the sidebarmenu */
                                          .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
                                          background-color: #ff0000;
                                          }

                                          /* other links in the sidebarmenu */
                                          .skin-blue .main-sidebar .sidebar .sidebar-menu a{
                                          background-color: #00ff00;
                                          color: #000000;
                                          }

                                          /* other links in the sidebarmenu when hovered */
                                          .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
                                          background-color: #ff69b4;
                                          }
                                          /* toggle button when hovered  */                    
                                          .skin-blue .main-header .navbar .sidebar-toggle:hover{
                                          background-color: #8390ef;
                                          }

                                         /* my atmpt background   */
                                          .skin-blue .content {background-color: #8390ef;}'))),
                tabsetPanel(type = "tabs",
                            tabPanel("Help", 
                                     br(),
                                     fillPage(
                                       fillRow(plotOutput("my_map"))
                                     )))))

server <- function(input, output, session){

  output$my_map <- renderPlot({
    wrld <- map_data("world")

    ggplot(wrld,  color = "white") +
      geom_polygon(aes(x = long, y = lat, group = group)) +
      coord_fixed(1.3) +
      guides(fill = F)
  })
}

shinyApp(ui, server)

1 Ответ

0 голосов
/ 08 мая 2018

Можете ли вы дать ниже свойство (вместо div вы можете использовать свой класс)

 div{
    width:100%;
    height:100%;
    }
...