R shiny教程-2:布局用户界面

R shiny

Shiny 是RStudio公司开发的R包,利用Shiny 可以轻松构建交互式Web应用程序(App)。

在前面一个 Shiny app的基本组成部分解释了构建一个shiny app的两个部分以及如何运行。

  • 一个用户界面: ui.R
  • 一个服务器功能: server.R
  • 运行:shinyApp(); runApp()

因此,最简单的shiny app如下:

  • 可以在Rstudio中直接运行
  • 可以创建一个文件R程序:app.R,然后再运行
library(shiny)

# Define UI ----
ui <- fluidPage(
  
)

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

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

运行之后,生成的是一个空白的网页。

#布局

  • fluidPage()可以创建流式布局,放置自定义的用户功能界面。

使用fluidPage在ui.R种创建一个界面,有标题栏和工具栏。工具栏包含一个侧栏面板和一个主面板。

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

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

server <- function(input, output) {}

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

titlePanelsidebarLayout是fluidPage种最常用的元素。

sidebarLayout 中最常用的功能:

  • sidebarPanel
  • mainPanel

这两个功能可以放置用户自定义内容到侧边栏和主界面。
侧边栏默认出现在左边,但是也可以设置到右边(sidebarLayout设置参数position = "right")。

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

上面创建了一个基本Shiny app,也可以通过其他函数添加自定义内容。navbarPage 可以设置导航栏添加多个多个交互界面。或者,可以使用fluidRow和column从grid系统构建布局。了解Shiny app各种布局,查看文章Shiny Application Layout Guide

#HTML内容

通过向*Panel中添加内容来丰富Shiny app。在,上面的例子中,使用sidebarPanel()函数向侧边栏添加标题, mainPanel向主界面添加了标题。

添加文本内容时,使用HTML 标签也是很方便和强大的。了解过HTML 的人都明白HTML 标签的作用与用法。

shiny function HTML5 equivalent creates
p <p> 段落
h1 <h1> 一级标题
h2 <h2> 二级标题
h3 <h3> 三级标题
h4 <h4> 四级标题
h5 <h5> 五级标题
h6 <h6> 六级标题
a <a> 超链接
br <br> 换行;或者空行
div <div> 分隔
span <span> 一定范围内文本格式设置
pre <pre> 文本预定义格式
code <code> 代码块
img <img> 图片
strong <strong> 加粗文本
em <em> 强调
HTML Directly passes a character string as HTML code

#标题

创建一个标题,如下:

各级标题都可以实现,h1()到h5()

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

然后,将创建的标题传递给Shiny app:h1("My title")作为参数传递给titlePanel, sidebarPanel, 或 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的所有标签都可以作为一个参数传递给Shiny的函数。

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

server <- function(input, output) {}

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

#文本格式

Shiny提供了许多标签(tag function)用于格式化文本。

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

#图片

图片可以增强应用程序的外观,帮助用户理解内容。img函数在应用程序中放置图片。

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

注:img会在特定位置寻找存放的图片。在Shiny app目录下一个名为www的文件夹,这个目录就是放置ui.R, server.R的位置。Shiny以一种特殊的方式处理www文件夹,Shiny会共享这个www下的文件给web使用的用户;所以,www文件夹一般存放图片、样式表和其他的应用程序的web组件

ui <- fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      img(src = "rstudio.png", height = 140, width = 400)
    )
  )
)
Image in an app

更多的tag functions可以参考:

#总结

  • fluidPage, titlePanel and sidebarLayout创建用户界面
  • 在Shiny函数中使用HTML标签
  • 使用HTML tag attributes(颜色之类的)作为一个参数窗体给Shiny函数
  • 添加元素到 titlePanel, sidebarPanelmainPanel
  • 每个面板(panel)有多个元素时,使用逗号隔开
  • 添加图片,将图片放置到www文件夹,使用img函数

#原文:

Shiny written-tutorial lesson2
Shiny Widgets Gallery

系列文章:
R shiny教程-1:一个 Shiny app的基本组成部分
R shiny教程-2:布局用户界面
Shiny Server安装

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,830评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,992评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,875评论 0 331
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,837评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,734评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,091评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,550评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,217评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,368评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,027评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,623评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2 341