Question

我有一个闪亮的应用程序，其中带有标题，一个情节，一些说明和一个 actionButton 。我希望元素按如下所示对齐：

顶部

标题；
说明和 actionButton 位于底部；
绘图 根据监视器分辨率在调整大小之间。

我的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 可以在台式机和移动屏幕上正常使用。说明也会根据当前显示的文字大小进行调整。

但是，该图无法正确调整大小：在移动设备上，说明位于图上。在台式设备的另一端，图仅使用屏幕的一半。

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

如果有足够的空间，如何使图调整 up 的大小，而如果没有足够的空间，如何调整 down 的大小？

？ >

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中的“情节”与您情节的id相匹配。

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

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

将元素放置在“发光”应用中，以便为移动和台式机显示器调整大小

1 个答案: