shiny 入门第一课

守善独身

1引言

shiny 是一个 R 包,能够将代码自动“反应式”绑定输入和输出，以及大量预先构建的小部件来 构建交互式 web 应用程序变得异常简单 ，这就可以构建漂亮、响应迅速、功能强大的应用程序。

说白了你可以利用它写一个 具有功能的 web 网页 ,基于的代码就是 R code,你可以看到很多 数据库, 在线单细胞可视化分析, RNA-seq 在线分析网址 等都是基于 shiny 构建的,当然你也可以构建一个属于你自己的小应用,方便自己的的数据分析或者可视化。

生信技能树的 B 站上 有一期完整的 shiny 教程,也推荐大家去学习观看:

大家也可以读读 电子版的 mastering-shiny 书:

网址: https://mastering-shiny.org/

我们还是从基础开始,学习一些最基本的东西,后面慢慢深入了解。

2安装

安装 shiny:

install.packages("shiny")
library(shiny)

3构建第一个 shiny 应用

打开 Rstudio,左上角 file 点击 new file 然后 shiny web App 即可新建一个 shiny 应用:

然后 添加名称,选择 一个文件 还是 多个文件 ,代码短可以一个文件里:

然后得到一个 app.R 的脚本文件,我们点击右上角的 Run App 即可运行:

这个默认的 APP 是一个 绘制直方图 的小脚本,提供 选择不同的 bin 数量达到不同分辨率的直方图:

4代码结构

一个完整的 App 的大概可以分为以下 3 个部分:

• 1.ui 部分: 也就是我们页面端我们眼睛能够看到的部分,比如控件,文字,图形等。
• 2.server 部分: 这部分是主要的代码部分,通过连接 ui 部分的输入,然后通过 server 的代码执行来反馈到 ui 上面。
• 3.运行 APP 的代码: 这部分在代码结尾,来运行 ui 和 server 的代码。

---

5ui 部分

下面我们来看看这个应用的 ui 部分:

# Define UI for application that draws a histogram
ui <- fluidPage(

    # 应用标题
    titlePanel("Old Faithful Geyser Data"),

    # 边界栏布局
    sidebarLayout(
        # 边界栏
        sidebarPanel(
            # 滑动控件
            sliderInput("bins",
                        "Number of bins:",
                        min = 1,
                        max = 50,
                        value = 30)
        ),

        # 主显示栏
        mainPanel(
           # 绘图
           plotOutput("distPlot")
        )
    )
)

fluidPage 函数主要分为 标题 和 布局 两部分,布局又分为 左边显示栏(较窄) 和 右边主显示栏(较宽),你也可以放在右边:

sidebarLayout(position = "right",

  sidebarPanel(
    # Inputs excluded for brevity
  ),
  mainPanel(
    # Outputs excluded for brevity
  )
)

shiny 还有多种布局:

grid 布局:

以 fluidRow() 格式的可以分成几行几列:

tabsetPanel 布局:

以 tabsetPanel() 格式的具有多个页面的布局:

Navlists 布局:

以 navlistPanel() 格式的左边导航布局:

Navbar Pages 布局:

以 navbarPage() 格式的上方多界面布局,可支持子页面选项:

布局里的输入控件

基于在布局里,我们可以 添加各种各样的小控件 来控制图形或者其它的显示或输出,下面是一个输入控件的基本组成:

每个控件都会有 inputId 和 label, inputId 是控件的 隐形属性,具有 唯一性, 不能重复, label 是控件的显示名称,是 直接显示在 ui 里面 的,上图可以看到这个滑动控件的名称为 Choose a number, 然后每个控件具有其它的自己不一样的参数。

以下是 shiny 的 输入控件:

代码: https://shiny.rstudio.com/tutorial/written-tutorial/lesson3/

布局里的输出函数

除了输入控件,为了 响应输入控件的变化 ,还可以添加 输出函数 来展现输入产生的影响或者结果,比如 图形, 文字, 下载图片或文件 等等。

下面是一个输出函数的基本组成:

只需要一个输出的 outputId 即可,也是隐性看不见的,这个 Id 用来传输给 server 的代码部分。

有以下几种输出:

可以输出 表格, 图片, 图形, 文字, 代码 等等。

6server 部分

有了 ui 里的输入与输出部分,看起来它们是没有任何联系的,server 部分就是来 连接这两个部分,从而构建一个完整的反应流程的。

server 的格式为:

server <- function(input, output) {
    ...
}

里面就是具体的分析 code 部分。

# Define server logic required to draw a histogram
server <- function(input, output) {

    output$distPlot <- renderPlot({
        # 接收输入控件的变量 input$bins from ui.R
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)

        # 绘制直方图
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
    })
}

由以上代码解析看到,连接的基本格式为:

output$distPlot <- renderPlot({
        ...
    })

使用 output$ 输出 Id 名称 和 renderPlot 来产出绘图结果,我们需要输出什么就使用对于的 render* 函数即可:

接收 ui 的输入变量则使用 input$ 输入控件 Id 名称 即可:

length.out = input$bins + 1

7连接 ui 和 server 代码

最后一部分代码很简单:

# Run the application
shinyApp(ui = ui, server = server)

这样就可以一起运行 ui 和 server 部分的代码了。

8HTML 内容

我们还可以在 ui 里面添加 html 属性的元素:

ui <- fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      h1("First level title"),
      h2("Second level title"),
      h3("Third level title"),
      h4("Fourth level title"),
      h5("Fifth level title"),
      h6("Sixth level title")
    )
  )
)

居中显示, align = "center":

ui <- fluidPage(
  titlePanel("My Star Wars App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      h6("Episode IV", align = "center"),
      h6("A NEW HOPE", align = "center"),
      h5("It is a period of civil war.", align = "center"),
      h4("Rebel spaceships, striking", align = "center"),
      h3("from a hidden base, have won", align = "center"),
      h2("their first victory against the", align = "center"),
      h1("evil Galactic Empire.")
    )
  )
)

格式化文本显示:

ui <- fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      # 段落
      p("p creates a paragraph of text."),
      p("A new p() command starts a new paragraph. Supply a style attribute to change the format of the entire paragraph.", style = "font-family: 'times'; font-si16pt"),
      # 加粗
      strong("strong() makes bold text."),
      # 斜体
      em("em() creates italicized (i.e, emphasized) text."),
      # 空行
      br(),
      # 代码
      code("code displays your text similar to computer code"),
      div("div creates segments of text with a similar style. This division of text is all blue because I passed the argument 'style = color:blue' to div", style = "color:blue"),
      br(),
      p("span does the same thing as div, but it works with",
        span("groups of words", style = "color:blue"),
        "that appear inside a paragraph.")
    )
  )
)

9宁静

喧嚣的城市与急促的生活促使我们向往宁静和自由的生活。

欢迎加入生信交流群。加我微信我也拉你进 微信群聊 老俊俊生信交流群 哦,。

群二维码：

老俊俊微信：

知识星球：

所以今天你学习了吗？

欢迎小伙伴留言评论！

今天的分享就到这里了，敬请期待下一篇！

最后欢迎大家分享转发，您的点赞是对我的鼓励和肯定！

如果觉得对您帮助很大，赏杯快乐水喝喝吧！

 往期回顾 

◀...