[英]Shiny: How to adjust the width of the tabsetPanel?
這是我的網站中嵌入的應用程序 。 我想擺脫我的應用程序下面的滾動小部件,這是由於tabsetPanel的寬度。
我使用以下代碼嵌入了應用程序:
<iframe width="800" height="480" frameborder="0" src="http://spark.rstudio.com/alstated/meanvar/"></iframe>
應用代碼:
ui.R
library(shiny)
# Define UI for application that plots random distributions
shinyUI(pageWithSidebar(
headerPanel(title = ""),
sidebarPanel(
sliderInput("size",
"Number of Observations",
min = 10,
max = 200,
value = 95),
sliderInput("mu",
"Mean",
min = -100,
max = 100,
value = 0),
sliderInput("sd",
"Standard Deviation",
min = 1,
max = 6,
value = 3),
checkboxInput(inputId = "indiv_obs",
label = "Show individual observations",
value = FALSE),
checkboxInput(inputId = "density",
label = "Show density estimate",
value = FALSE),
conditionalPanel(condition = "input.density == true",
sliderInput(inputId = "bw_adjust",
label = "Bandwidth Adjustment",
min = 0.2,
max = 2,
value = 1,
step = 0.2))
),
mainPanel(
tabsetPanel(
tabPanel("Plot",
plotOutput(
outputId = "histogram",
height = "400px",
width = "400px")),
tabPanel("Summary",
verbatimTextOutput(outputId = "datsummary"))
))
)
)
server.R
library(shiny)
# Define server logic required to generate and plot a random distribution
shinyServer(function(input, output) {
data <- reactive(rnorm(
n = input$size,
mean = input$mu,
sd = input$sd
))
output$histogram <- renderPlot({
hist(data(),
probability = TRUE,
xlab = "Data",
ylab = "Density",
main = "Histogram of Random Samples")
if(input$indiv_obs){
rug(data())
}
if(input$density){
dens <- density(data(), adjust = input$bw_adjust)
lines(dens, col = "blue")
}
})
output$datsummary <- renderPrint(summary(data()))
})
任何幫助是極大的贊賞!
我現在想一想,我在Shiny 主頁上檢查應用程序的html代碼。 通過將選項class
設置為span1
, span2
, span3
等,使用html中的<div>
(Document Division)標記調整span3
。 span
的后綴越高,除法的寬度越大。 我只是在我的ui.R代碼中添加div()
標記:
div(
tabsetPanel(
tabPanel("Plot",
plotOutput(
outputId = "histogram",
height = "400px",
width = "400px")),
tabPanel("Summary",
verbatimTextOutput(outputId = "datsummary"))
), class = "span7")
另一種調整寬度(和高度)的方法:
加
), style='width: 1000px; height: 1000px' # end of tabsetPanel
在tabsetPanel之后,在這種情況下不需要div()
上述示例在某些情況下有效。 我需要一個更通用的解決方案。 以下解決方案可以適應任何情況。 例如,您的Shiny應用程序仍然可以響應。
我的解決方案
首先,在tabsetPanel之前創建一個div並給它一個類。 其次,編寫一段jQuery / javascript來查找該div的父元素。 第三,使用javascript / jQuery更改此父元素的類。 您可以將類更改為任何您喜歡的類,例如col-sm-12,col-sm-11,其他一些標准的Bootstrap類,或者您可以添加和創建自己的類。 第四,將自定義jQuery / javascript添加到您的Shiny應用程序中(確保將.js文件保存在Shiny應用程序的www文件夾中)。
這是我的例子:
Javascript / jQuery(general.js):
$(function (){
$("div.delParentClass").parent().removeClass("col-sm-8").addClass("col-sm-12");
/* In addClass you can specify the class of the div that you want. In this example,
I make use of a standard Bootstrap class to change the width of the tabset: col-sm-12.
If you want the tabset to be smaller use: col-sm-11, col-sm-10, ... or add
and create your own class. */
});
閃亮的用戶界面
mainPanel(
tags$head(tags$script(src="general.js")),
div(class="delParentClass",
tabsetPanel(
tabPanel("Some panel", .....),
tabPanel("Some panel", .....),
tabPanel("Some panel", .....)
)
)
)
一種不同的方式來調整的寬度sidebarPanel
和tabsetPanel
是基於修改width
的的屬性col-sm-4
和col-sm-8
分別CSS類。
使用tag$head
和tag$style
,可以直接將CSS添加到Shiny UI。
有關詳細信息,請參閱https://shiny.rstudio.com/articles/css.html 。
這不是一個優雅的解決方案,但它可以正常工作。
閃亮的用戶界面
shinyUI(fluidPage(
tags$head(
tags$style(HTML("
.col-sm-4 { width: 25%;}
.col-sm-8 { width: 75%;}
"))
),
headerPanel(title = ""),
sidebarPanel(
sliderInput("size",
"Number of Observations",
min = 10,
max = 200,
value = 95),
sliderInput("mu",
"Mean",
min = -100,
max = 100,
value = 0),
sliderInput("sd",
"Standard Deviation",
min = 1,
max = 6,
value = 3),
checkboxInput(inputId = "indiv_obs",
label = "Show individual observations",
value = FALSE),
checkboxInput(inputId = "density",
label = "Show density estimate",
value = FALSE),
conditionalPanel(condition = "input.density == true",
sliderInput(inputId = "bw_adjust",
label = "Bandwidth Adjustment",
min = 0.2,
max = 2,
value = 1,
step = 0.2))
),
mainPanel(
tabsetPanel(
tabPanel("Plot",
plotOutput(
outputId = "histogram",
height = "400px",
width = "400px")),
tabPanel("Summary",
verbatimTextOutput(outputId = "datsummary"))
))
)
)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.