R闪亮，如何在列中添加图答案

【问题标题】：R shiny, how to add a plot in a columnR闪亮，如何在列中添加图
【发布时间】：2016-09-07 19:56:48
【问题描述】：

我想绘制 3 个测量值，以便用户感受分散。我使用以下代码创建了一个 R 闪亮的应用程序：

ui.R

shinyUI(fluidPage(

fluidRow(
h2("Enter 3 values"),
column(width=2,offset=0, numericInput("triceps.sf1", label = "1.", value = 0)),
column(width=2,offset=0, numericInput("triceps.sf2", label = "2.", value = 0)),
column(width=2,offset=0, numericInput("triceps.sf3", label = "3.", value = 0)),
column(width=8,offset=0, plotOutput("sfTricepsPlot"))
 )
)#fluidpage
)#shinyUI

以及服务器代码，其中每个测量值都绘制为十字：

服务器.R

library(graphics)
shinyServer(function(input, output) {

###################################
## Plot the values of sf measured
sfPlot <- function( m1, m2, m3 ){

par(mai = c(0.8, 0.8, 0.3, 0.8))
plot(1, axes=F, xaxt = "n", xlab = "Mesures", ylab = "sf (mm)", xlim = c(0.8, 3.2), ylim=c(0.8*m1, 1.2*m1))
axis( 1, at=1:3 )
axis(2, at=seq(from=0.8*m1, to=1.2*m1, by=10))
points( x=1, y=m1, pch=4, lwd=2, cex=1.5 )
points( x=2, y=m2, pch=4, lwd=2, cex=1.5 )
points( x=3, y=m3, pch=4, lwd=2, cex=1.5 )
}

######################################
## Plot the triceps sf
output$sfTricepsPlot <- renderPlot({
sfPlot(input$triceps.sf1, input$triceps.sf2, input$triceps.sf3)
})
})

您将看到该图出现在需要输入值的行下方。我怎样才能让那个情节更偏向右侧呢？我的目标确实是在最终代码中包含许多输入行，将绘图放在右侧会使页面更紧凑。

【问题讨论】：

标签： r plot shiny

【解决方案1】：

使用column函数的offset参数。

column(width=8,offset=4, plotOutput("sfTricepsPlot"))

记住屏幕的宽度是 12 个单位，所以如果你打算把一个 8 个单位的 UI 元素放在最右边的位置，请使用offset = 4

编辑：在这种情况下，您只需指定列的高度。（我将 numericInput 的宽度更改为 1，因此 3 个输入 + 输出宽度为

column(width=1,offset=0, div(style = "height:150px;"), numericInput("triceps.sf1", label = "1.", value = 0)),
column(width=1,offset=0, div(style = "height:150px;"), numericInput("triceps.sf2", label = "2.", value = 0)),
column(width=1,offset=0, div(style = "height:150px;"), numericInput("triceps.sf3", label = "3.", value = 0)),
column(width=8,offset=0, plotOutput("sfTricepsPlot"))

【讨论】：

更改偏移量将绘图移动到右侧，但它仍然位于第一行下方，我希望三个输入选项卡和绘图（尽可能）在同一行

【解决方案2】：

Shiny Bootstrap 使用的 CSS 框架基于响应式网格布局：

Bootstrap 包含一个响应式、移动优先的流体网格系统，随着设备或视口大小的增加，它可以适当地扩展到 12 列。

每行列的最大宽度只能为 12。在您的示例中，您的总数为 2+2+2+8，即 14。这意味着您的最后一列将显示在其他列的下方。您可以将width=8 更改为width=6 来解决您的问题。

【讨论】：