
1.1基础UI
library(shiny)
ui <- fluidPage(
# front end interface
)
server <- function(input, output, session) {
# back end logic
}
shinyApp(ui, server)
1.1 输入
1.1.1 常规构架
所有的输入都包含了一个同样的变量inputID
这个inputID
用来连接前端和后台。如果UI端口输入的ID是name
那么后台server就是input$name
大多数inputID
都有一个参数就是label
,这是为了UI端的可读性,显示给用户看的。除此以外inputID
还有一个参数就是value
。下面就是一个完整的例子。包含了name, label, value
的inputID
sliderInput("min", "Limit (minimum)", value = 50, min = 0, max = 100)
1.1.2 文字
textInput()
: 少量文字
passwordInput()
: 密码
textAreaInput()
: 成篇文字
ui <- fluidPage(
textInput("name", "What's your name?"),
passwordInput("password", "What's your password?"),
textAreaInput("story", "Tell me about yourself", rows = 3)
)

1.1.3 数字
可以通过numericInput()
或者sliderInput()
创建输入框.
ui <- fluidPage(
numericInput("num", "Number one", value = 0, min = 0, max = 100),
sliderInput("num2", "Number two", value = 50, min = 0, max = 100),
sliderInput("rng", "Range", value = c(10, 20), min = 0, max = 100)
)

1.1.4 日期
ui <- fluidPage(
dateInput("dob", "When were you born?"),
dateRangeInput("holiday", "When do you want to go on vacation next?")
)

1.1.5 选项
animals <- c("dog", "cat", "mouse", "bird", "other", "I hate animals")
ui <- fluidPage(
selectInput("state", "What's your favourite state?", state.name),
radioButtons("animal", "What's your favourite animal?", animals)
)

还可以设置图标
ui <- fluidPage(
radioButtons("rb", "Choose one:",
choiceNames = list(
icon("angry"),
icon("smile"),
icon("sad-tear")
),
choiceValues = list("angry", "happy", "sad")
)
)

dropdown选项是
ui <- fluidPage(
selectInput(
"state", "What's your favourite state?", [state.name](<http://state.name/>),
multiple = TRUE
)
)

如果选项很多的话可以参考
也可以设置多选框
ui <- fluidPage(
checkboxGroupInput("animal", "What animals do you like?", animals)
)

check就是yes,没有check就是no的设置。
ui <- fluidPage(
checkboxInput("cleanup", "Clean up?", value = TRUE),
checkboxInput("shutdown", "Shutdown?")
)
1.1.6 上传文件
ui <- fluidPage(
fileInput("upload", NULL)
)

1.1.7 动作按钮
ui <- fluidPage(
actionButton("click", "Click me!"),
actionButton("drink", "Drink me!", icon = icon("cocktail"))
)
actionButton

ui <- fluidPage(
fluidRow(
actionButton("click", "Click me!", class = "btn-danger"),
actionButton("drink", "Drink me!", class = "btn-lg btn-success")
),
fluidRow(
actionButton("eat", "Eat me!", class = "btn-block")
)
)

1.2 输出
和输入一样,输出也需要自己唯一的ID。如果你在UI定义一个输出的结果的ID是plot
,那么在后端这个结果就是server$plot
。然后在后端服务器上,结果的输出都用到对应的render
的函数。
1.2.1 文字
ui <- fluidPage(
textOutput("text"),
verbatimTextOutput("code")
)
server <- function(input, output, session) {
output$text <- renderText({
"Hello friend!"
})
output$code <- renderPrint({
summary(1:10)
})
}
shinyApp(ui, server)

library(shiny)
ui <- fluidPage(
textOutput("text"),
verbatimTextOutput("print")
)
server <- function(input, output, session) {
output$text <- renderText("hello!")
output$print <- renderPrint("hello!")
}
shinyApp(ui, server)
- renderText(): 把结果整合成了一串字符,和UI中的textOutput()是一对
- renderPrint():用R语言的方式输出结果,和UI中的verbatimTextOutput() 是一对

1.2.2 表格
有两个方式可以展现data.frame
-
tableOutput()
renderTable()
用来展现一个完整的data.frame
-
dataTableOutput()
renderDataTable()
可以把data.frame分页展示
ui <- fluidPage(
tableOutput("static"),
dataTableOutput("dynamic")
)
server <- function(input, output, session) {
output$static <- renderTable(head(mtcars))
output$dynamic <- renderDataTable(mtcars, options = list(pageLength = 5))
}

1.2.3 图
plotOutput()
and renderPlot()
library(shiny)
ui <- fluidPage(
plotOutput("plot", width = "400px")
)
server <- function(input, output, session) {
output$plot <- renderPlot(plot(1:5), res = 96)
}
shinyApp(ui, server)

res设置图片大小,推荐保持96,这样界面可以看起来和R一样显示。
Plot比较特殊,既可以是输入窗口,也可以是输出窗口,之后的章节会介绍如何设置成可用户交互式图形。
1.2.4 下载文件
实现下载需要一些别的操作,会在之后的章节里介绍。
网友评论