用shiny制作html界面

Build a user interface

参考lesson2: https://shiny.rstudio.com/tutorial/written-tutorial/lesson2/

Layout

界面的设计元素包括一些text、image和html都添加在fluidPage函数中：

titlePanel 标题栏

sidebarPanel 界面的边栏

mainPanel 主界面

ui <- fluidPage(
  titlePanel("title panel"),

  sidebarLayout(
    sidebarPanel("sidebar panel"),
    mainPanel("main panel")
  )
)

其中sidebarLayout包括两个版面Panel的对应参数:

sidebarPanel function output
mainPanel function output

当然默认的sidebar是在界面左侧的，如果想放到右边，调节position = "right"即可

ui <- fluidPage(
  titlePanel("title panel"),
  
  sidebarLayout(position = "right",
                sidebarPanel("sidebar panel"),
                mainPanel("main panel")
  )
)

Sidebar on the right

除此之外，还可以用navbarPage创造多页的交互界面，fluidRow 和 column可以创造网格界面，更多的进阶个性化shiny界面设计可以参考：Shiny Application 我们这里主要介绍sidebarLayout

HTML Content

我们可以添加更多个性化的标签，借鉴了html5的格式，shiny都有对应的函数可以组织这些标签，下表展示的是html5 tag和shiny tag的对应关系

html5.jpg

Headers

只需要在对应函数里添加需要展示的文本即可，比如下面的一级标题：

h1("My title")
<h1>My title</h1>

这样直接运行出来的就是html标签的格式

如果要在app里面展示，只需要把h1("My title")作为参数传给titlePanel, sidebarPanel, or mainPanel

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")
    )
  )
)

显示效果：

App with headers

其他的字体排版设置比如字体居中：h6("Episode IV", align = "center")，所有这种HTML tag的属性都可以通过对应shiny tag的参数进行设置

这里需要一些html的背景知识，如果不熟的话可以参考w3school:http://www.w3schools.com/tags/tag_hn.asp

Formatted text

来看一个例子：p是段落，strong表加粗，em表斜体，br表换行，code为代码格式，div分割出独立style的一段文字，span可以修改段落内一部分文字的格式

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.")
    )
  )
)

Formatting options

Images

要插入图片使用的函数是img，图片名在src参数内设置，eg.img(src = "my_image.png")

也可以通过height和width参数修改图片大小：

img(src = "my_image.png", height = 72, width = 72)

为了方便R找到需要的图片，建议在app.R对应的目录下创建一个名为www的文件夹专门放置图片等附件，因为R会自动对www的目录做特殊处理，像下面这样：

Image in www directory

rstudio.png文件可供下载

Image in an app

Other tags

更多的tags及功能：Customize your UI with HTML

Shiny HTML Tags Glossary

可以尝试制作下面的app，熟悉每个标签的功能：

Target app