R ShinyDashBoard макет столбца макет

Question

В моем теле панели инструментов R Shiny есть следующий код:

dashboardBody(
    tabBox(width = 12,
           tabPanel("US County Detail",
                fluidRow(width=12,
                         column(width=6, tableOutput("County_tbl")),
                         column(width=3, uiOutput("States_List")),
                         column(width=3, sliderInput("slider", "Threshold:", 0, 100, post = " %", 50))),
                fluidRow(width=12,
                         column(width=7, ''),
                         column(width=4, plotlyOutput("County_Map"))),
                fluidRow(width=12,
                         column(width=6, ''),
                         column(width=6, plotlyOutput("County_Chart")))
              )
            )
          )

По сути, с помощью приведенного выше кода я пытаюсь создать длинную таблицу данных в первом столбце с раскрывающимся списком и ползункомрядом с ним в столбцах 2 и 3. Затем рядом с таблицей данных я хочу показать карту с гистограммой внизу.

Однако карта и гистограмма в настоящее время расположены прямо в нижней части моегодлинная таблица данных. Это означает, что вы не можете видеть их, если не прокрутите вниз. Любые идеи, как я могу заставить карту и диаграмму под раскрывающимся списком и ползунком?

Спасибо

В настоящее время делаем это:

Когда на самом деле я пытаюсь поднять это здесь:

Answer 1

HI Пожалуйста, предоставьте минимальный воспроизводимый код, чтобы он помог воспроизвести проблему. Это вопрос о том, как вы устроите свой пользовательский интерфейс, как жидкость и столбец. Я попытался с тем же и построить пример кода на этом.

[![library(shiny)
library(shinydashboard)
library(plotly)

ui <- dashboardPage(
  dashboardHeader(
    title = "Dashboard"),


  #sidebar content
  dashboardSidebar(
    sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard"))
    )
  ),



dashboardBody(
  tabItems(
    tabItem(tabName='dashboard',
            tabBox(width = 12,
                   tabPanel("US County Detail",
                            fluidRow(
                              column(5,
                                     fluidRow(
                                       tableOutput("County_tbl")
                                     )
                                     ),
                              column(7,
                                     fluidRow(
                                       column(6,
                                              uiOutput("States_List")
                                              ),
                                       column(6,
                                              sliderInput("slider", "Threshold:", 0, 100, post = " %", 50)
                                              )
                                              ),
                                     fluidRow(
                                       column(12,
                                              plotlyOutput("County_Map")
                                              )
                                            ),
                                     fluidRow(
                                       column(12,
                                              plotlyOutput("County_Chart")
                                              )

                                     )

                                     )
                            )
                   )
            )    

    )

  )

)
)



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

  output$County_tbl<-renderTable({
    head(mtcars)
  })

  output$States_List<-renderUI({
    list_data<-unique(names(mtcars))
    selectInput("cars","Select Car",choices = list_data)
  })

  output$County_Map<-renderPlotly({
    plot_ly(
      x = c("giraffes", "orangutans", "monkeys"),
      y = c(20, 14, 23),
      name = "SF Zoo",
      type = "bar"
    )
  })

  output$County_Chart<-renderPlotly({
    Animals <- c("giraffes", "orangutans", "monkeys")
    SF_Zoo <- c(20, 14, 23)
    LA_Zoo <- c(12, 18, 29)
    data <- data.frame(Animals, SF_Zoo, LA_Zoo)

  plot_ly(data, x = ~Animals, y = ~SF_Zoo, type = 'bar', name = 'SF Zoo') %>%
      add_trace(y = ~LA_Zoo, name = 'LA Zoo') %>%
      layout(yaxis = list(title = 'Count'), barmode = 'group')

  })


}  
shinyApp(ui = ui, server = server)

Answer 2

Это связано с тем, что карта и гистограмма расположены в строке под таблицей, поэтому для них имеет смысл оказаться под таблицей.

Вы хотите вложить свои столбцы, чтобы карта и диаграмма находились в одной строке с таблицей.

Я не уверен, что приведенный ниже код будет в точности верным - если вы предоставите воспроизводимый пример, я был бы рад проверить, как это применить. Но, надеюсь, вы видите идею.

fluidRow(
# This column is the total width of the app
  column(width = 12,
         fluidRow(
# This column is half the width of the app and contains the table
           column(width = 6,
                  tableOutput("County_tbl")),
# This column is half the width of the app and contains everything else
           column(width = 6,
# This row contains the dropdown box and slider (each set to half width)
                  fluidRow(
                    column(width = 6, 
                           uiOutput("States_List")),
                    column(width = 6,
                           sliderInput("slider", "Threshold:", 0, 100, post = " %", 50))), 
# This row contains the outputs
                  fluidRow(
                    plotlyOutput("County_Map"), 
                    plotlyOutput("County_Chart")
                  )
           )
         )
  )
)