查看原文
其他

基于R语言的shiny网页工具开发基础系列-03

The following article is from 生信技能树 Author 生信技能树

l3-更复杂的页面部件

shiny 小部件提供了一个用户给app传送信息的方式

为什么加上控制小工具

上节已经学会在用户界面放置一些简单的元素,但显示更复杂的内容需要用到小部件widgets

widgets 是可交互网页元素,让用户用它们控制app

Shiny 小部件widgets 从用户手里收集值,当用户改变小工具的时候,值也会变

控制小部件


如图有各种小部件,shiny有一系列的小部件,每个都可以用直白命名的R函数创建,例如函数actionButton 用来创建 动作按钮 (Action Button),函数 sliderInput 创建 一个 滑块 (slider bar)

下表是常见的小部件



其中的一些部件是用Twitter Bootstrap项目构建的,一个受欢迎的构建用户界面的开源框架

加上小部件

你可以像添加其他元素一样添加widgets

放置一个widget 函数 在ui对象的sidebarPanelmainPanel 函数中

每个widget 函数都要几个参数,每个widget的前两个参数一定是:

  • widget的名字name:用户不会看到这个名字,但是可以用它获取widget的值,应该用字符串
  • 一个label:这个标签将和app中的小部件一起出现,应该是字符串,但是也可以是空的""

此例中,name参数是"action", 标签是 "Action"

actionButton("action", label = "Action")

其他参数因小部件而异,具体要看小部件执行的工作所需的内容

他们包括初始值,范围和增量

也可以通过查看函数的帮助页面来获取其他参数,如?selectInput

试试把下面的代码运行一下吧

library(shiny)

# Define UI ----
ui <- fluidPage(
  titlePanel("Basic widgets"),
  
  fluidRow(
    
    column(3,
           h3("Buttons"),
           actionButton("action""Action"),
           br(),
           br(), 
           submitButton("Submit")),
    
    column(3,
           h3("Single checkbox"),
           checkboxInput("checkbox""Choice A", value = TRUE)),
    
    column(3
           checkboxGroupInput("checkGroup"
                              h3("Checkbox group"), 
                              choices = list("Choice 1" = 1
                                             "Choice 2" = 2
                                             "Choice 3" = 3),
                              selected = 1)),
    
    column(3
           dateInput("date"
                     h3("Date input"), 
                     value = "2014-01-01"))   
  ),
  
  fluidRow(
    
    column(3,
           dateRangeInput("dates", h3("Date range"))),
    
    column(3,
           fileInput("file", h3("File input"))),
    
    column(3
           h3("Help text"),
           helpText("Note: help text isn't a true widget,"
                    "but it provides an easy way to add text to",
                    "accompany other widgets.")),
    
    column(3
           numericInput("num"
                        h3("Numeric input"), 
                        value = 1))   
  ),
  
  fluidRow(
    
    column(3,
           radioButtons("radio", h3("Radio buttons"),
                        choices = list("Choice 1" = 1"Choice 2" = 2,
                                       "Choice 3" = 3),selected = 1)),
    
    column(3,
           selectInput("select", h3("Select box"), 
                       choices = list("Choice 1" = 1"Choice 2" = 2,
                                      "Choice 3" = 3), selected = 1)),
    
    column(3
           sliderInput("slider1", h3("Sliders"),
                       min = 0, max = 100, value = 50),
           sliderInput("slider2""",
                       min = 0, max = 100, value = c(2575))
    ),
    
    column(3
           textInput("text", h3("Text input"), 
                     value = "Enter text..."))   
  )
  
)

# Define server logic ----
server <- function(input, output) {
  
}

# Run the app ----
shinyApp(ui = ui, server = server)

结果如下

可以每个都感受一下是做什么的,或者改改代码的值,看看有什么变化

此app的布局方案可以参考application layout guide. 当然此篇只要了解他们的作用就行了,不必了解这种复杂的布局方案


练习

尝试写个如图所示的界面(答案很长放在后面,但是一定一定要先自己做一遍哦)



小节回顾

  • shiny提供一个函数家族来创建这些小工具
  • 每个小工具的函数都需要namelabel这两个参数
  • 一些小工具需要特别的指令来执行他们的工作
  • 加入小工具就像加入其他HTML内容一样简单

更进一步

Shiny Widgets Gallery 提供模版,供你快速加入到自己的app中

访问这个网站,图库中展示了每个小部件,并演示了每个小部件的值根据你的输入而变化


选择一个小工具,并点击See Code。图库会跳转到一个描述这个小工具的示例app,只需要复制其中代码到自己的app中即可。


我又做出来了哦,这是我的结果



我的代码

library(shiny)

# Define UI ----
ui <- fluidPage(
  titlePanel("censusVis"),
  sidebarLayout(
    sidebarPanel(
      p("Create demographic maps with information from the 2010 US Census."),
      br(),
      selectInput("select", h3("Choose a variable to display"),
                  choices = list("Percent White" = 1"Percent Black" = 2,
                                 "Percent Hispanic" = 3"Percent Asian" = 4), selected = 1),
      sliderInput("slider", h3("Range of interest:"),
                  min = 0, max = 100, value = c(0,100))
    ),
    mainPanel("")
  )
)

# Define server logic ----
server <- function(input, output) {

}

# Run the app ----
shinyApp(ui = ui, server = server)

参考答案

library(shiny)

# Define UI ----
ui <- fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(
      h2("Installation"),
      p("Shiny is available on CRAN, so you can install it in the usual way from your R console:"),
      code('install.packages("shiny")'),
      br(),
      br(),
      br(),
      br(),
      img(src = "rstudio.png", height = 70, width = 200),
      br(),
      "Shiny is a product of "
      span("RStudio", style = "color:blue")
    ),
    mainPanel(
      h1("Introducing Shiny"),
      p("Shiny is a new package from RStudio that makes it "
        em("incredibly easy "), 
        "to build interactive web applications with R."),
      br(),
      p("For an introduction and live examples, visit the ",
        a("Shiny homepage."
          href = "http://shiny.rstudio.com")),
      br(),
      h2("Features"),
      p("- Build useful web applications with only a few lines of code—no JavaScript required."),
      p("- Shiny applications are automatically 'live' in the same way that "
        strong("spreadsheets"),
        " are live. Outputs change instantly as users modify inputs, without requiring a reload of the browser.")
    )
  )
)

# Define server logic ----
server <- function(input, output) {
  
}

# Run the app ----
shinyApp(ui = ui, server = server)

Reference:

Shiny - Add control widgets



既往专辑



您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存