用shiny制作html界面

作者: Shaoqian_Ma | 来源:发表于2020-05-23 21:00 被阅读0次

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创造多页的交互界面,fluidRowcolumn可以创造网格界面,更多的进阶个性化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

相关文章

网友评论

    本文标题:用shiny制作html界面

    本文链接:https://www.haomeiwen.com/subject/ptzlahtx.html