为什么使用R-shiny？

  1. 可以视觉化数据处理结果,是一个很好展示分析结果的平台

  2. 可以让不会R的人用网页的方式查看你的应用

  3. 相比其他的编程软件和网页设计，R-shiny非常容易上手，不需要过多的编程基础知识

学习R-shiny的资源

这个指南会涵盖基础的R-shiny教程，但是如果想要更深入的学习，我们推荐以下资源：

  1. https://shiny.rstudio.com/tutorial/#written-tutorials

  2. https://mastering-shiny.org/index.html

这个R-shiny教程需要和 cheat sheet 对照着学习效果最佳。

R-shiny基础

接下来让我们进入R-Shiny的基础。基础组成部分为：

  1. UI

  2. Server

  3. ShinyApp

如何在R-studio中创建R-Shiny?

  • R-shiny 的格式是app.R脚本。app.R脚本为shiny最基础的部分，可以用app.R制作出一个简单的Shiny应用。

  • 在R-studio的程序上方打开 File > New Project > New Directory > Shiny Web Application

  • 如果已经创建了一个app.R，则可以输入shinyapp + shift + tab 打开 shiny app。


3个最基础的组成结构：

  1. UI

    • layout（网页布局）网页的格式化样式：在cheat sheet上第二页右边第二列。其指令跟真正编写html网页的指令非常相似，但是更加简单。

    • 定义input（输入）：在cheat sheet上第一页的最右边

    • 定义output（输出）所在的板块：cheat sheet 第一页 output下有output ID 参数的蓝色字体的代码

  2. server：定义app如何处理数据

    • server里需要定义output（输出）程序才能运行

    • output指令：在cheat sheet 第一页output下黑册字体的代码

  3. 一个shinyApp函数：一个自动的系统，在输入内容改变的时候自动去修改输出的内容。这个代码基本上一直都是一样的:shinyApp(ui, server)


理解R-shiny的基础结构
  • 打开app.R的时候，新的文件上系统提供了一个R-shiny的代码例子，并且系统已经对初始代码标注了解释。
library(shiny)

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

    # Application title
    titlePanel("Old Faithful Geyser Data"),

    # Sidebar with a slider input for number of bins 
    sidebarLayout(
        sidebarPanel(
            sliderInput("bins",
                        "Number of bins:",
                        min = 1,
                        max = 50,
                        value = 30)
        ),

        # Show a plot of the generated distribution
        mainPanel(
           plotOutput("distPlot")
        )
    )
)

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

    output$distPlot <- renderPlot({
        # generate bins based on input$bins from ui.R
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)

        # draw the histogram with the specified number of bins
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
    })
}

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

点击R studio右上角run app或者快捷键 Cmd/Ctrl + Shift + Enter 试试运行应用吧 ctrl + c 关闭应用

  • 我们可以运行一下以上系统自带的代码。这个代码弹出的效果就是我们学习后最终要达到的基础R-shiny能力程度。

  • 这个代码清晰的展现了必不可少的最基础的三个组成结构。

  • 这三个组成结构就如房子的地基和金属框架一样。而我们需要做的就是将组成结构里填写用来完善网页布局和功能的代码，也就是房子的砖块，瓦片等，并在里面装上实用性的楼梯和电梯。


例子 - 以3大基础结构组成的简单app

有了这三个基础的结构，我们便可以做出一个非常简单的Shiny App。

library(shiny)
ui <- fluidPage(
  "Hello, world!"
)
server <- function(input, output, session) {
}
shinyApp(ui, server)

以上展示的是一个完整的Shiny app。 但由于我们没有填入输入项和输出项，所以这个app暂时还没有任何功能。我们之后会在程序server里添砖加瓦使app能达到我们想要的效果。

点击R studio右上角run app或者快捷键 Cmd/Ctrl + Shift + Enter 试试运行应用吧 ctrl + c 关闭应用


UI - R-shiny的网页布局 （layout）

UI layout（网页布局）指令：在cheat sheet上第二页最右边的一列

常用的基本板块布局代码

fluidPage ：流动布局的页面 - 最重要和常用的板块布局代码。建立了所有R-shiny所需要的html, CSS, JavaScript功能。在我们学习的过程中经常会用到。

选定了流动布局后要划分布局内的板块：

titlePanel：标题板块

sidebarLayout：常用的将布局划分为左右两板块的代码(4:8)，其中包含了

  1. sidebarPanel：左边的小一点的板块

  2. mainPanel：右边的主要板块

Image 1 - Side Layout Example


例子1 - 板块布局
ui <- fluidPage(
  titlePanel("title Panel"),
  sidebarLayout(
    sidebarPanel(
      tags$hgroup(h1("Side Bar"), h2("Panel"))
      
    ),
    mainPanel(
      HTML("<p>You can add content to your Shiny app by placing it inside a <code>*Panel</code> function. For example, the apps above display a character string in each of their panels. The words “sidebar panel” appear in the sidebar panel, because we added the string to the <code>sidebarPanel</code> function, e.g. <code>sidebarPanel(\"sidebar panel\")</code>. The same is true for the text in the title panel and the main panel.</p>"),
      div()
    )
  )
)
server <- function(input, output, session) {
}
shinyApp(ui, server)

Multi-row

其实板块是由多个横向板块组成的，其实sidebarLayout也是在这个横向板块上建成的。但是这个横向板块可以被直接使用去创建更加复杂的视觉效果。

通常我们可以先照常用fluidPage()设定一下基本的流动布局，接着用fluidRow()创造横向板块，并用column()将横向板块分割成几个纵向板块

例子 - Multi-row
fluidPage(
  fluidRow(
    column(4, 
      ...
    ),
    column(8, 
      ...
    )
  ),
  fluidRow(
    column(6, 
      ...
    ),
    column(6, 
      ...
    )
  )
)

Image 2 - Multi-row Example


对r-shiny的运用更加熟练以后可以尝试运用其他的布局板块，有兴趣在课后可以去了解。代码列表在cheat sheet的第二页右侧。


Tabsets 多个窗口/页面（横向）

这个代码将在之后吴同学的例子中出现。

当信息过多时，我们希望将信息分类并以更加清晰的方式呈现给观众的时候就会使用tabsetPanel()去设定板块为窗口性质的板块。接下来我们会用tabPanel()去具体设定每一个窗口里的内容。（可以在cheat sheet上看到示例）

Tabsets也可以在其他板块内使用，运用非常多灵活。


HTML

R-shiny的设计就是为了让我们在没有html的基础下可以创造一个网页。我们可以在我们的R-shiny页面里用tag$去使用html代码。最常用的一些html指令前也不需要加tags。

常用的html指令在cheat sheet第二页 参考网站： https://www.w3schools.com/tags/tag_hn.asp


小控件和交互入门 （Widgets and Reactivity)

R-shiny非常重要的一个功能就是可以让用户控制变量，数据，或者方法从而展现不同的输出结果，让用户更加直观的看到各种元素对结果的影响。

这就需要控件（可以让用户在网页上互动的元素）和交互（让输入直接影响输出的output）


控件

常用的自带控件和他们展示的效果已经在cheat sheet 上的第一面右侧 (input) 列举出来了。

例子 - 控件 textInput
ui <- fluidPage(
  
  titlePanel("Hello Widgets"),
  
  sidebarLayout(
    sidebarPanel(
     h1("Please input your name"),
     textInput("input1", label = "", value = "",
               placeholder = "your name")
      
    ),
    mainPanel(
      h1("Showing results")
    )
  )
)
server <- function(input, output, session) {
}
shinyApp(ui, server)

前两个参数分别是该控件的唯一ID和在网页中显示的名字，所有控件的前两个都是这两个参数。第一个参数在所有插件中必须唯一，后续的数据交互时shiny需要根据这个ID获取输入信息。

(https://www.jianshu.com/p/a86ed8cbd970)


交互式入门 Reactivity

交互式可以让用户在控制左边的控件的时候影响右边展示的输出，使用户能更直观的看到输入值对于输出的结果的影响。


在加入了控件元素后，创建交互式只需要2步：

1.在UI下增加R output: 确定输出值所要在的UI板块（例如：在 mainPanel)

  • cheat sheet 第一页 output 下有output ID 参数的蓝色字体的代码

2.在server下构建输出的render 代码：确定具体输出的方式 （例如：字符，图片，还是表格）

  • cheat sheet 第一页 output 下黑册字体的代码


更多output代码可参考：https://htmlwidgets.org/


UI 下的 R output 和 server 下的 render 代码要相互呼应才能让输出在我们指定的板块出现。

Image 3 - 简单示例 - R output