Блог

В приложении ниже я оборачиваю два графика в box функцию, чтобы добавить границы вокруг них, чтобы визуально отличить один от другого. Однако при этом я получаю ненужное количество пробелов между моим селектором ввода и графиками. Может ли кто-нибудь сказать мне, как я могу уменьшить это пространство. Я предполагаю, что используется решение css , но я не мог понять, как его правильно реализовать:

Редактировать: Любые потенциальные решения, просто хотел уточнить, что два меньших поля должны существовать в большом поле «Статистика».

 library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(tidyverse)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      box(title = "Statistics", width = 12, collapsible = T,
          sliderInput("numSelect", "Select Value", min = 1, max = 10, value = 5, width = "25%"),
          fluidRow(
            column(width = 6, box(width = NULL, plotOutput("cars1"))),
            column(width = 6, box(width = NULL, plotOutput("cars2"))))
      )
    )
  )
)

server <- function(input, output) {
  output$cars1 <- renderPlot(
    mtcars %>% 
      sample_n(input$numSelect) %>% 
      ggplot(aes(x = mpg, y = hp))  
      geom_point()
  )
  output$cars2 <- renderPlot(
    mtcars %>% 
      sample_n(input$numSelect) %>% 
      ggplot(aes(x = mpg, y = hp))  
      geom_point()
  )
}

shinyApp(ui, server)
 

Существует множество способов добавить CSS в ваше приложение, но если вы хотите повлиять только на один элемент, вы можете передать CSS в качестве аргумента style , который возможен для большинства функций Shiny. В вашем случае вы можете добавить стиль margin-top fluidRow , чтобы переместить два графика на 20 пикселей вверх. Функция будет выглядеть следующим образом:

fluidRow(style = "margin-top: -20px;",

Вы можете изменить значение, которое наилучшим образом соответствует вашим потребностям.