css - R Shiny : relative css size for plotOutput not working

Question

shiny 的引用指南显示 CSS 相对大小选项可用于 plotOutput 函数。虽然绝对测量尺寸一直有效，但我无法成功复制地 block 高度的相对尺寸单位。注意:% 单位和“自动”适用于绘图宽度，但不适用于高度。

以下代码已从 shiny gallery 中提取，仅修改了绘图高度。 http://shiny.rstudio.com/gallery/faithful.html

服务器.R

shinyServer(function(input, output) {

  output$main_plot <- renderPlot({

    hist(faithful$eruptions,
         probability = TRUE,
         breaks = as.numeric(input$n_breaks),
         xlab = "Duration (minutes)",
         main = "Geyser eruption duration")

    if (input$individual_obs) {
      rug(faithful$eruptions)
    }

    if (input$density) {
      dens <- density(faithful$eruptions,
                      adjust = input$bw_adjust)
      lines(dens, col = "blue")
    }
  })
})

ui.R

shinyUI(bootstrapPage(

  selectInput(inputId = "n_breaks",
              label = "Number of bins in histogram (approximate):",
              choices = c(10, 20, 35, 50),
              selected = 20),

  checkboxInput(inputId = "individual_obs",
                label = strong("Show individual observations"),
                value = FALSE),

  checkboxInput(inputId = "density",
                label = strong("Show density estimate"),
                value = FALSE),

  plotOutput(outputId = "main_plot", height = "50%"),

  # Display this only if the density is shown
  conditionalPanel(condition = "input.density == true",
                   sliderInput(inputId = "bw_adjust",
                               label = "Bandwidth adjustment:",
                               min = 0.2, max = 2, value = 1, step = 0.2)
  )
))

当绝对单位用于绘图高度时，浏览器控制台将为绘图 div 显示这一点(为了便于阅读，img 源已被截断):

<div id="main_plot" class="shiny-plot-output shiny-bound-output" style="width: 100% ; height: 400px">
  <img src="data:image/png..." width="1920" height="400">
</div>

但是，当使用上面的代码时，浏览器控制台会为 plot div 显示以下内容:

<div id="main_plot" class="shiny-plot-output shiny-bound-output" style="width: 100% ; height: 50%">
</div>

当对绘图高度使用相对度量时，main_plot div 中不会填充任何内容。我还缺少其他选项吗？

版本:

R - 3.1.1 和 Shiny - 0.10.1

顺便说一句，根据 w3 指南，还可以实现剩余的 CSS 相对测量(特别是 vh 和 vw)会很好:

http://dev.w3.org/csswg/css-values/#relative-lengths

Answer 1

50% 是什么？您放置图的容器需要有一个高度开始。您的容器会响应并根据您放置在其中的内容进行调整。例如，以下将起作用:

library(shiny)
runApp(list(
  ui = bootstrapPage(

    selectInput(inputId = "n_breaks",
                label = "Number of bins in histogram (approximate):",
                choices = c(10, 20, 35, 50),
                selected = 20),

    checkboxInput(inputId = "individual_obs",
                  label = strong("Show individual observations"),
                  value = FALSE),

    checkboxInput(inputId = "density",
                  label = strong("Show density estimate"),
                  value = FALSE),
    div(
      plotOutput(outputId = "main_plot", height = "50%")
    , style = "height: 300px; background-color: green;"),

    # Display this only if the density is shown
    conditionalPanel(condition = "input.density == true",
                     sliderInput(inputId = "bw_adjust",
                                 label = "Bandwidth adjustment:",
                                 min = 0.2, max = 2, value = 1, step = 0.2)
    )
  ),
  server = function(input, output) {

    output$main_plot <- renderPlot({

      hist(faithful$eruptions,
           probability = TRUE,
           breaks = as.numeric(input$n_breaks),
           xlab = "Duration (minutes)",
           main = "Geyser eruption duration")

      if (input$individual_obs) {
        rug(faithful$eruptions)
      }

      if (input$density) {
        dens <- density(faithful$eruptions,
                        adjust = input$bw_adjust)
        lines(dens, col = "blue")
      }
    })
  }
)) 

所以在这种情况下，我们将绘图放置在具有定义高度的 div 中，正如预期的那样，绘图占据了 50%

div(plotOutput(outputId = "main_plot", height = "50%")
    , style = "height: 300px; background-color: green;")