css - 将元素放在 `shiny` 应用程序中，以便它们针对移动和桌面显示器调整大小

Question

我有一个 Shiny 的应用程序，它有一个标题、一个情节、一些描述和一个actionButton。我希望元素按如下方式对齐:

1. 标题在顶部；
2. 描述和底部的actionButton；
3. 绘制 根据显示器分辨率调整大小。

我的 app.R 如下所示:

library(shiny)

text <- list(
  "one",
  "one\ntwo",
  "one\ntwo\nthree",
  "one\ntwo\nthree\nfour"
)

ui <- fluidPage(
   titlePanel("title"),
   fluidRow(plotOutput("plot")),
   fluidRow(style = "position:absolute;bottom:20px;left:20px", 
            verbatimTextOutput("text"),
            actionButton("next_el", ">>")
   )
)

server <- function(input, output) {
   output$plot <- renderPlot({
      x    <- faithful[, 2] 
      bins <- seq(min(x), max(x), length.out = input$next_el + 1)
      hist(x, breaks = bins, col = 'darkgray', border = 'white')
   })
   output$text <- renderText(text[[input$next_el + 1]])
   observeEvent(input$next_el, {})
}

# Run the application 
shinyApp(ui = ui, server = server)

我目前拥有的是:标题、描述 和actionButton 在桌面和移动屏幕上都可以正常放置。 描述也会随着文本的数量调整大小。

但是，绘图未正确调整大小:在移动设备上，描述 位于绘图 之上。另一方面，在桌面设备上，plot 只使用了大约一半的屏幕。

我尝试使用 plotOutput("plot", height = "50%") 和 plotOutput("plot", height = "auto") 调整图的大小，但随后剧情就消失了。

我该怎么做才能让我的绘图在有足够空间时向上调整大小，在没有足够空间时向下调整大小？

Answer 1

无需额外的 css/html 代码即可解决此问题的一种方法是使用 session$clientData 对象动态设置绘图的高度。绘图高度设置为默认值，但您可以根据绘图宽度将高度设置为动态值，该值响应浏览器窗口的大小。

更新后的服务器代码如下所示:

server <- function(input, output, session) {
  output$plot <- renderPlot({
    x    <- faithful[, 2] 
    bins <- seq(min(x), max(x), length.out = input$next_el + 1)
    hist(x, breaks = bins, col = 'darkgray', border = 'white')
  }, height = function() {
    if (session$clientData$output_plot_width <= 1000) {
      (session$clientData$output_plot_width)*(3/4)
    } else { (session$clientData$output_plot_width)*(7/16) }
  })
  output$text <- renderText(text[[input$next_el + 1]])
  observeEvent(input$next_el, {})
}

output_plot_width 中的“plot”与您的绘图的 id 匹配。

您会注意到代码将绘图高度设置为宽度的函数。您可以通过更改函数中的分数来更改纵横比。我还使用了两种不同的宽高比，一种用于绘图宽度小于 1000 像素(手机、平板电脑等)的情况，另一种用于用户更有可能使用台式机或笔记本电脑屏幕的情况。

公平地说，我实际上并没有在我的手机上对此进行测试 - 我只是在我的浏览器中使用不同的窗口宽度和宽高比对其进行了测试。