APP界面布局设计

简介：shinydashboard 是一个基于shiny的包，相当于shiny 的快捷方式，能够让你快速上手R可视化交互展示，此前专栏已经对shiny的原理和用法进行了详细阐述，而shinydashboard特点是能够快速写出常规UI框架的页面，如果常规的框架不能满足你，请参考shiny知乎专栏。

先预览一下：

1. 安装包
   

shinydashboard 需要Shiny 0.11版本以上 运行:

install.packages("shinydashboard")

1. 基本框架认识：
   

界面框架包含3部分：

• a header（标题栏）
  

• a sidebar（侧边栏）,
  

• a body（展示栏）.

以下是页面展示的最小代码集合：

## ui.R ##
library(shinydashboard)

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

可以尝试一下代码，在R控制台输入shinyApp() 函数

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

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

server <- function(input, output) { }

shinyApp(ui, server)

基本框架如图，够简洁吧。接下来就要填充内容了。

## app.R ##
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(
    # Boxes need to be put in a row (or column)
    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)

在原有基本框架下，我们用box（）函数为展现栏增加所需的元素，例如：plot的图和对应的滑动条。（如图）

接下来，我们为侧边栏增加元素，我们会在原有的侧边栏中增加菜单栏控件，类似Shiny的 tabPanels，控件效果是当你点击其中任意控件，在展示栏中会产生对应变化。

这样的效果需要两部分工作要做。第一，将menuItems 加入菜单栏侧边栏，伴随tabNames.

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

在展示栏，tabItem中对应上文控件的tabName:

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

当显示“dashboard”，尝试点击其中的控件:

点击“Widgets” 控件：

以上用shinydashiboard制作展示，有点就是快速，简洁，模块化使得制作起来思路非常清晰，学习难度小，片刻即可完成。