Question

有光泽的参考指南显示了plotOutput函数可以使用CSS相对大小选项。虽然绝对测量尺寸一直有效，但我无法成功复制绘图高度的相对大小单位。注意：％单位以及＆＃34; auto＆＃34;适用于绘图宽度，而不是高度。

以下代码已从闪亮的图库中提取，并且仅修改了地图高度。 http://shiny.rstudio.com/gallery/faithful.html

server.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>

但是，当使用上面的代码时，浏览器控制台会为绘图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")
      }
    })
  }
))

enter image description here

因此，在这种情况下，我们将地块放置在具有定义高度的div中，正如预期的那样，情节会占用50%

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

R有光泽：plotOutput的相对css大小不起作用

1 个答案: