KeepNotes blog

Stay hungry, Stay Foolish.

0%

Shiny layout guide（shinydashboard）

Posted on Edited on In
Symbols count in article: 4.4k Reading time ≈ 4 mins.

Shiny的UI界面可用多个方式来展示，你可以用shiny基本布局函数+theme主题函数来实现；也可以用shinydashboard来定义你网页的布局，当然还有shiny的JS插件以及其他技巧。 这里主要介绍一下shiny的一些基本布局函数（对之前Learning Shiny的一些补充）以及shinydashboard包的使用

首先的是Shiny layout guide：

Grid Layout

fluidRow( 
    column(4,
      wellPanel(
        sliderInput("obs", "Number of observations:",  
                    min = 1, max = 1000, value = 500)
      )       
    )

1. fluidRow()：类似流动布局，如果该函数下面有多个column，则从左到右排布； 2. column(4,)：代表宽度4，总宽度为12，如果该函数下面有多个部件，则从上到下排布； 3. wellPanel()：一种布局显示方式

Tabsets

ui <- fluidPage(
  titlePanel("Tabsets"),

  sidebarLayout(

    sidebarPanel(
      # Inputs excluded for brevity
    ),

    mainPanel(
      tabsetPanel(
        tabPanel("Plot", plotOutput("plot")), 
        tabPanel("Summary", verbatimTextOutput("summary")), 
        tabPanel("Table", tableOutput("table"))
      )
    )
  )
)

1. 上述代码的UI布局，将“plot”、“Summary”和“Table”三块内容分别以tab形式放置的mainPanel上； 2. tabsetPanel（position = “”）可以设置这些tab的相对于content的方位，如below,left,right等，默认是在上方

以list的形式展示需要的各个内容

ui <- fluidPage(
  titlePanel("Application Title"),

  navlistPanel(
    "Header A",
    tabPanel("Component 1"),
    tabPanel("Component 2"),
    "Header B",
    tabPanel("Component 3"),
    tabPanel("Component 4"),
    "-----",
    tabPanel("Component 5")
  )
)

以置顶的tab形式展示各块内容，其中navbarMenu()函数还可以设置子块，形成一个下拉菜单

ui <- navbarPage("My Application",
             tabPanel("Component 1"),
             tabPanel("Component 2"),
             navbarMenu("More",
                        tabPanel("Sub-Component A"),
                        tabPanel("Sub-Component B"))
)

Column Offsetting

offset：表示偏移量，一般我的理解是相对上一个column的偏移量，如果不设置偏移量，一般默认是紧挨着的

ui <- fluidPage(
  fluidRow(
    column(4,
           "4"
    ),
    column(4, offset = 4,
           "4 offset 4"
    )      
  ),
  fluidRow(
    column(3, offset = 3,
           "3 offset 3"
    ),
    column(3, offset = 3,
           "3 offset 3"
    )  
  )
)

Column Nesting

这里就是column的嵌套过程

ui <- fluidPage(
  fluidRow(
    column(12,
           "Fluid 12",
           fluidRow(
             column(6,
                    "Fluid 6",
                    fluidRow(
                      column(6, 
                             "Fluid 6"),
                      column(6,
                             "Fluid 6")
                    )
             ),
             column(width = 6,
                    "Fluid 6")
           )
    )
  )
)

下面则是shinydashboard包的一些用法：

Shiny中用shinydashboard包是来展示dashboards，如果想简单做个UI界面的话，上述的几点layout就足够了。但是如果想做个美观的UI界面，那么可以尝试下shinydashboard

shinydashboard在UI中主要也有三部分（header，sidebar和body）组成：

dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody()
)

这dashboardHeader()用于设定dashboards的标题；dashboardSidebar()相当于shiny默认布局方式中的sidebarPanel，用于设定导航栏；dashboardBody()则类似于tabsetPanel

dashboardHeader()基本用法是设定标题，但是其还有Message menus来设定一些信息栏（信封的标签），Notification menus来设定一些通知栏（感叹号的标签），Task menus（这个不太清楚）

Sidebar这个快速导航功能则是靠dashboardSidebar()来实现的

如果设定Sidebar的宽度，则dashboardSidebar(width=300)即可，header标题的宽度也是类似dashboardHeader(titleWidth = 350)

如果展示多个页面（类似上面的Navbar Pages），则可以在dashboardSidebar()函数中调用menuItem()；如果一个menu下还要一个sub menu，那么用menuSubItem()函数；而icon则可以选择tabPanel的标签样式，可在https://fontawesome.com/icons?from=io自行挑选

dashboardSidebar(
    sidebarMenu(
      id = "tabs",
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", tabName = "widgets", icon = icon("th"))
    )
  )

上述的id = "tabs"可以让你在server.R中用input$tabs来获取你在UI界面中选择的menuItem的tabName，这个很有用的

设定了menuItem后，那么在dashboardBody中需要加入tabItem来对每个menu设定各自的布局样式；如果有多个menu，那么先用tabItems函数表示有多个menu（一般也是有多个menu才会用这个函数），再用tabItem对每个menu进行设定

dashboardBody(
    tabItems(
      # First tab content
      tabItem(tabName = "dashboard",
        fluidRow(
          box(plotOutput("plot1", height = 250))
        )
      ),

      # Second tab content
      tabItem(tabName = "widgets",
        h2("Widgets tab content")
      )
    )
  )

在sidebar部分，我们可以加入一些输入小插件，类似于fileInput，radioButtons，actionButton等等

dashboardSidebar(
    fileInput(),
    radioButtons(),
    actionButton()
  )

如果不想要sidebar部分，则用dashboardSidebar(disable = TRUE)来禁止其使用

Body则是整个网页的主体部分，用于展示最终的内容，其主要靠dashboardBody函数

dashboardBody也是使用fluidRow函数进行流动布局，对于每框内容则使用box函数（这是shinydashboard特有的），在box函数里还可以使用多个参数，其中可下拉折叠collapsible功能这个觉得很好用

box(width = NULL,
    status = "info",
    title = "PRM Protein List",
    collapsible = T, collapsed = F,
    textOutput("warning"))

如果你想对每个box下有多快内容，类似于tabpanels，那么用tabBox代替box即可，如下：

tabBox(
  side = "left", height = "250px",
  selected = "Tab1",
  tabPanel("Tab1", "Tab content 1"),
  tabPanel("Tab2", "Tab content 2"),
)

还有类似于box的infoBox和valueBox，是一种另类展示一些简单信息的box，我不太常用。。。

除了上述比较常用的布局功能外，还有一些小细节的东西，比如用dashboardPage(skin = "blue")来设定主题颜色

如果想自定义的CSS，则需将CSS文件放在shiny文件夹下的www目录下，如www/custom.css

参考资料：
http://shiny.rstudio.com/articles/layout-guide.html
http://shiny.rstudio.com/articles/dashboards.html

本文出自于http://www.bioinfo-scrounger.com转载请注明出处

Related Posts