时间戳

首页 > 解决方案 > 如何使单列可滚动？

r - 如何使单列可滚动？

问题描述

我正在开发一个 R 闪亮的应用程序。它由 3 列组成。第 1 列是搜索条件，第 3 列是输出图。
中心列有多个表格，需要用户向下滚动。我想让这个面板可以滚动，同时保持页面的其余部分是静态的。这可能吗？

    ui <- fluidPage(
  tags$head(
    
    HTML("<title>Mipres</title>"),
    
    tags$style(
    
      
      HTML(".shiny-notification {
             position:fixed;
             top: calc(0%);
             left: calc(90%);
             }
             "
      )
      ),
    ), 
    img(src = "saludmia-s.png", height = 110, width = 250),
  
  titlePanel(
    h1("Informes", align = "center")),            

    hr(style = "border-top: 1px solid #000000;"),
    #br(),
 
  fluidRow(
    column(2,
           titlePanel(h3("Parametros de busqueda")),
       titlePanel(h4("Fecha")),

           verbatimTextOutput("date_max"),
           airDatepickerInput(
             inputId = "date1",
             #label = "Select range of dates:",
             range = F, 
             autoClose = T,
             value = Sys.Date()-14 ,
                    #   Sys.Date()),
             todayButton = F,
             clearButton = T,
             addon = c("none")
            ),
           
           airDatepickerInput(
             inputId = "date2",
             #label = "Select range of dates:",
             range = F, 
             autoClose = T,
             value = Sys.Date()+1 ,
             #   Sys.Date()),
             todayButton = F,
             clearButton = T,
             addon = c("none")
           ),
           
           div(style = "margin-top: -10px"),
           br(),
           radioButtons("radio1", 
                        label = h4("Criterios"),
                        choices = list("Direccionado" = 1),#,
                                       #"Direccionado - No entregado" = 2,
                                       #"Direccionado - Entregado - No Facturado" = 3,
                                       #"Direccionado - Entregado - Facturado" = 4,
                                       #"Solo facturado" = 5), 
                        selected = 1),
          
           
           br(),
           br(),
           
       #Processing Button
           actionButton("gobutton1", label =  "Procesar"),

           style='border-right: 1px solid gray'),
   
     
    
    column(7,
           
           style='border-right: 1px solid gray',
           h3("Direccionamientos totales para el periodo"),
           DT::dataTableOutput("table1"),
           br(),
           h3("Entregas programadas segun direccionamiento"),
           DT::dataTableOutput("table2"),
           br(),
           h3("Entregas reportadas segun direccionamiento"),
           DT::dataTableOutput("table3"),           
           br(),
           h3("Facturacion reportada segun direccionamiento"),
           DT::dataTableOutput("table4"),     
           style=""),
            
   column(2,

           plotlyOutput('plot')

           )
    
    
  ),
  
    

)

标签： rshiny

解决方案

我认为这里的技巧是使用shinydashboard包中的框在流体列中创建单独的 div。对于包含长表的中间框，您可以设置框高度以填充屏幕的垂直范围，然后添加overflow-y:scroll到样式参数以添加滚动条。对于您想要静态的框，只需确保其中的对象（例如，绘图或输入小部件）不高于屏幕尺寸，方法是将plotOutput()函数中的高度参数设置为屏幕高度的 85% 以说明标题等等。请参见下面的示例：

library(shiny)
library(shinydashboard) # for box()
library(ggplot2)
library(DT)

ui <- fluidPage(
  titlePanel(
    h1("Informes", align = "center")),
    hr(style = "border-top: 1px solid #000000;"),
  
  column(width = 2,
         titlePanel(h3("Parametros de busqueda")),
         titlePanel(h4("Fecha")),
         box(
           shinyWidgets::airDatepickerInput(
             inputId = "date1",
             range = F, 
             autoClose = T,
             value = Sys.Date()-14 ,
             todayButton = F,
             clearButton = T,
             addon = c("none")
           ),
           
           shinyWidgets::airDatepickerInput(
             inputId = "date2",
             range = F, 
             autoClose = T,
             value = Sys.Date() + 1 ,
             todayButton = F,
             clearButton = T,
             addon = c("none")
           ),
           
           div(style = "margin-top: -10px"),
           br(),
           radioButtons("radio1", 
                        label = h4("Criterios"),
                        choices = list("Direccionado" = 1,
                        "Otra cosa" = 2,
                        "Otra cosa mas" = 3),
                        selected = 1),
           br(),
           actionButton("gobutton1", label = "Procesar")
         )
  ),
         
  column(width = 5,
         box(style='overflow-y:scroll; height:85vh; min-width:40vw;',
           DTOutput('table')
         )
  ),
  
  column(width = 5,
         box(style = 'height:85vh; min-width:40vw;',
             plotOutput("plot", height = '85vh')
         )
  )
)


server <- function(input, output, session) {
  
  output$plot <- renderPlot({
    # some dummy data
    time <- as.numeric(rep(seq(1,7),each = 7))
    value <- runif(49, 10, 100)             
    group <- rep(LETTERS[1:7],times = 7)
    data <- data.frame(time, value, group)
    
    # stacked area chart
    ggplot(data, aes(x=time, y=value, fill=group)) + 
      geom_area()
  })
  
  
  output$table <- renderDT({
    datatable(mtcars,
       options = list(paging = FALSE)
       )
  })
  
}

shinyApp(ui, server)

带有中间滚动列的应用程序

推荐阅读