shinydashboard 让你制作一个酷炫的页面端

花自飘零水自流

1引言

我们今天学习一下 shinydashboard 这个包制作 ui 端的用法和一些函数,看起来很不错!我们跟随官网教程走一波。

2基本结构

shinydashboard 结构和 shiny 差不多,但也有一些不同。安装:

install.packages("shinydashboard")

组成

## app.R ##
library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody()
)

server <- function(input, output) { }

shinyApp(ui, server)

ui 由 dashboardHeader 标题, dashboardSidebar 侧边栏, dashboardBody 主体 三部分组成, server 部分基本不变。

举例

## app.R ##
library(shinydashboard)

ui <- dashboardPage(
  # 标题
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(
    # 放置2个box,每个box里放入出图和控件
    fluidRow(
      box(plotOutput("plot1", height = 250)),
      box(
        title = "Controls",
        sliderInput("slider", "Number of observations:", 1, 100, 50)
      )
    )
  )
)

server <- function(input, output) {
  # 绘图代码
  set.seed(122)
  histdata <- rnorm(500)

  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })
}

shinyApp(ui, server)

添加侧边栏

## Sidebar content
  dashboardSidebar(
    sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", tabName = "widgets", icon = icon("th"))
    )
  )

侧边栏我们在 sidebarMenu 里添加不同的子菜单 menuItem, menuItem 里提供 显示的标签 和 标签 ID ,还可以给不同的 菜单形状 :

主题部分

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

          box(
            title = "Controls",
            sliderInput("slider", "Number of observations:", 1, 100, 50)
          )
        )
      ),

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

因为我们在侧边栏定义了多个菜单,每个菜单对应不同的主体部分,所以我们应该在 tabItems 里使用 tabItem 里来添加我们的 ui 元素, tabItem 通过提供 侧边栏菜单的 ID 来连接识别。

点击第二个菜单:

另一种写法

此外还可以换一种写法,赋值给不同的变量,这样更简易易读:

header <- dashboardHeader()

sidebar <- dashboardSidebar()

body <- dashboardBody()

ui <- dashboardPage(header, sidebar, body)

如果我们不想显示标题栏可以关闭:

dashboardHeader(disable = TRUE)

3Sidebar

使用 badgeLabel 和 badgeColor 来添加提突出和颜色:

## ui.R ##
sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
    menuItem("Widgets", icon = icon("th"), tabName = "widgets",
             badgeLabel = "new", badgeColor = "green")
  )
)

body <- dashboardBody(
  tabItems(
    tabItem(tabName = "dashboard",
      h2("Dashboard tab content")
    ),

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

# Put them together into a dashboardPage
dashboardPage(
  dashboardHeader(title = "Simple tabs"),
  sidebar,
  body
)

侧边栏添加控件

此外我们还可以在侧边栏添加控件,可以在子菜单里添加.也可以直接添加:

ui <- dashboardPage(
  # 标题
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(sidebarMenu(
    menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
    menuItem("Widgets", tabName = "widgets", icon = icon("th")),
    # 子菜单里添加
    menuItem("slider", tabName = "slider",
             sliderInput('sli','sli',min = 0,max = 5,value = 3)),
    # 直接添加
    selectInput('slect','slect',choices = c(1,2,3),selected = 2)
  ))

4box

status

我们可以在 box 里添加很多东西,还可以 给 box 添加颜色条,通过指定 status 参数:

box(title = "Histogram", status = "primary", plotOutput("plot2", height = 250)),

box(
  title = "Inputs", status = "warning",
  "Box content here", br(), "More box content",
  sliderInput("slider", "Slider input:", 1, 100, 50),
  textInput("text", "Text input:")
)

有以下 4 种:

box 变为可折叠和添加背景

solidHeader=TRUE 可以给 box 的标题添加背景, collapsible=TRUE 可以把 box 变为可折叠形式:

box(
  title = "Histogram", status = "primary", solidHeader = TRUE,
  collapsible = TRUE,
  plotOutput("plot3", height = 250)
),

box(
  title = "Inputs", status = "warning", solidHeader = TRUE,
  "Box content here", br(), "More box content",
  sliderInput("slider", "Slider input:", 1, 100, 50),
  textInput("text", "Text input:")
)

添加背景色

background 可以指定 box 的背景色:

box(
  title = "Histogram", background = "maroon", solidHeader = TRUE,
  plotOutput("plot4", height = 250)
),

box(
  title = "Inputs", background = "black",
  "Box content here", br(), "More box content",
  sliderInput("slider", "Slider input:", 1, 100, 50),
  textInput("text", "Text input:")
)

box 添加子菜单

box 里面还可以添加多个子菜单形式的 tab,使用 tabBox 里面添加 tabPanel :

body <- dashboardBody(
  fluidRow(
    tabBox(
      title = "First tabBox",
      # The id lets us use input$tabset1 on the server to find the current tab
      id = "tabset1", height = "250px",
      tabPanel("Tab1", "First tab content"),
      tabPanel("Tab2", "Tab content 2")
    ),
    tabBox(
      side = "right", height = "250px",
      selected = "Tab3",
      tabPanel("Tab1", "Tab content 1"),
      tabPanel("Tab2", "Tab content 2"),
      tabPanel("Tab3", "Note that when side=right, the tab order is reversed.")
    )
  ),
  fluidRow(
    tabBox(
      # Title can include an icon
      title = tagList(shiny::icon("gear"), "tabBox status"),
      tabPanel("Tab1",
        "Currently selected tab from first box:",
        verbatimTextOutput("tabset1Selected")
      ),
      tabPanel("Tab2", "Tab content 2")
    )
  )
)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(title = "tabBoxes"),
    dashboardSidebar(),
    body
  ),
  server = function(input, output) {
    # The currently selected tab from the first box
    output$tabset1Selected <- renderText({
      input$tabset1
    })
  }
)

5皮肤

shinydashboard 支持不同的颜色主题,使用以下代码改变:

dashboardPage(skin = "blue")
dashboardPage(skin = "black")
...

6Sidebar width

可以自定义 Sidebar 的宽度, width 参数:

shinyApp(
  ui = dashboardPage(
    dashboardHeader(
      title = "Title and sidebar 350 pixels wide",
      titleWidth = 350
    ),
    dashboardSidebar(
      width = 350,
      sidebarMenu(
        menuItem("Menu Item")
      )
    ),
    dashboardBody()
  ),
  server = function(input, output) { }
)

7icons

有以下两个链接,大家根据自己喜好选择,第一个好像我进不去哈哈:

• 1. https://fontawesome.io/icons/
• 2. https://getbootstrap.com/docs/3.4/components/#glyphicons

欢迎加入生信交流群。加我微信我也拉你进 微信群聊 老俊俊生信交流群 哦。

群二维码：

老俊俊微信：

知识星球：

所以今天你学习了吗？

欢迎小伙伴留言评论！

今天的分享就到这里了，敬请期待下一篇！

最后欢迎大家分享转发，您的点赞是对我的鼓励和肯定！

如果觉得对您帮助很大，赏杯快乐水喝喝吧！

 往期回顾 

◀...