1.安装

install.packages("shinydashboard")

2.基础知识

仪表盘有三个部分:标题、侧边栏,身体。下面是最最小的仪表面板页面的UI：

## ui.R ##
library(shinydashboard)

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

通过shinyApp()函数可以快速查看R控制台：

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

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody())
server <- function(input, output) { }

shinyApp(ui, server)

添加实用部分：

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

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(
    # Boxes need to be put in a row (or column)
    fluidRow(
      box(plotOutput()),

      box(
        title = "Controls",
        sliderInput(, , )
      )
    )
  )
)

server <- function(input, output) {
  )
  histdata <- rnorm()

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

shinyApp(ui, server)

添加侧边栏：

下面将添加性能像tabs的菜单项，这与shiny中的tabPanels相似，当点击菜单栏的时候，将在main body中显示设置的不同的内容。为了实现这种功能，需要做到两点，第一，在侧边栏dashboardSidebar 的sidebarMenu中添加menuItem，并用tabName设置其名称，如下所示：

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

第二，在dashboardBody中添加tabItem和tabItems，并设置tabName:

## Body content
  dashboardBody(
    tabItems(
      # First tab content第一个标签内容
      tabItem(tabName = "dashboard",
        fluidRow(
          box(plotOutput()),

          box(
            title = "Controls",
            sliderInput(, , )
          )
        )
      ),

      # Second tab content第二个标签内容
      tabItem(tabName = "widgets",
        h2("Widgets tab content")
      )
    )
  )

默认显示为“Dashboard”菜单：

当点击“Widgets”时：

3.结构---Shiny and HTML

To understand how the parts of a dashboard work together, we first need to know how a Shiny UI is built, and how it relates to the HTML of a web page.在Shiny中的HTML标签函数,比如div()和p()返回的对象可以呈现为HTML。例如,当您在R控制台运行这些命令,它将打印HTML:

# A basic div
div(class = "my-class", "Div content")
## <div class="my-class">Div content</div>

# Nested HTML tags
div(class = "my-class", p("Paragraph text"))
## <div class="my-class">
##   <p>Paragraph text</p>
## </div>

一些函数返回更复杂的HTML片段,他们使用户不必知道所有的所需的HTML来龙去脉创建诸如文本输入或者侧边栏:

textInput("Id", "Label")
## <div class="form-group shiny-input-container">
##   <label for="Id">Label</label>
##   <input id="Id" type="text" class="form-control" value=""/>
## </div>

sidebarPanel(
  div("First div"),
  div("Second div")
)
## <div class="col-sm-4">
##   <form class="well">
##     <div>First div</div>
##     <div>Second div</div>
##   </form>
## </div>

Shiny app的UI构建这些HTML。shinydashboard包提供了一组函数用来创建HTML,将生成一个仪表板。如果你复制一个仪表板页面的UI代码(上图)粘贴到R控制台,它将打印仪表板的HTML代码。

3.1结构概述

仪表盘dashboardPage()函数三个组件:头,侧边栏,身体:

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

对于更复杂的APP,APP划分成块可以让它更可读:

header <- dashboardHeader()

sidebar <- dashboardSidebar()

body <- dashboardBody()

dashboardPage(header, sidebar, body)

下面分别介绍上面的三个部分

3.2Header

标题可以有一个标题和下拉菜单,例子:

设置该标题比较简单，仅需要使用title参数：

dashboardHeader(title = "My Dashboard")

dropdownMenu()函数生成下拉菜单。有三种类型的菜单——消息message、通知notification和任务tasks,每个菜单必须用相应类型的项填充。

3.2.1消息message菜单

在dropdownMenu()函数中添加messageItem()函数，messageItem()中包含消息菜单需要的值（from和message，form指的是消息来源，message指的是消息内容）。您还可以控制图标和通知时间字符串。默认情况下,图标是一个人的轮廓。(关于如何设置icon图标，在后面的外观中会有详细的介绍)字符串可以是任何文本。例如,它可能是一个相对的日期/时间像“5分钟”,“今天”,或“昨天中午12:30”,或者一个绝对时间,像“2014-12-01 13:45”。

dropdownMenu(type = "messages",
  messageItem(
    from = "Sales Dept",
    message = "Sales are steady this month."
  ),
  messageItem(
    from = "New User",
    message = "How do I register?",
    icon = icon("question"),
    time = "13:45"
  ),
  messageItem(
    from = "Support",
    message = "The new server is ready.",
    icon = icon("life-ring"),
    time = "2014-12-01"
  )
)

显示动态内容

在大多数情况下,你会想要动态的内容。这意味着在服务器端生成HTML内容,发送到客户端表现。在UI代码,可以使用dropdownMenuOutput是这样的:

dashboardHeader(dropdownMenuOutput("messageMenu"))

在服务器端,您在renderMenu中会生成整个菜单,如下:

output$messageMenu <- renderMenu({
  # 此处生成每一个messageItems到list. This assumes
  # 假设messageData是一个带有两列的数据框(data frame),两列显示的内容分别是'from' and 'message'.
  msgs <- apply(messageData, , function(row) {
    messageItem(from = row[["from"]], message = row[["message"]])
  })

  # 这相当于调用:
  # dropdownMenu(type=]], msgs[[]], ...)
  dropdownMenu(type = "messages", .list = msgs)
})

对于交互式的例子,使用帮助?renderMenu.

动态显示sliderbarMenu:

library(shiny)
library(shinydashboard)
ui <- dashboardPage(
  dashboardHeader(title = "Dynamic sidebar"),
  dashboardSidebar(
    sidebarMenuOutput("menu")
  ),
  dashboardBody()
)

server <- function(input, output) {
  output$menu <- renderMenu({
    sidebarMenu(
      menuItem("Menu item", icon = icon("calendar"))
    )
  })
}

shinyApp(ui, server)

动态显示dropdownMenu:

library(shiny)
library(shinydashboard)
# ========== Dynamic dropdownMenu ==========
# Example message data in a data frame
messageData <- data.frame(
  from = c("Admininstrator", "New User", "Support"),
  message = c(
    "Sales are steady this month.",
    "How do I register?",
    "The new server is ready."
  ),
  stringsAsFactors = FALSE
)

ui <- dashboardPage(
  dashboardHeader(
    title = "Dynamic menus",
    dropdownMenuOutput("messageMenu")
  ),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      box(
        title = "Controls",
        sliderInput(, , )
      )
    )
  )
)

server <- function(input, output) {
  output$messageMenu <- renderMenu({
    msgs <- apply(messageData, , function(row) {
      messageItem(
        from = row[["from"]],
        message = paste(row[["message"]], input$slider)
      )
    })

    dropdownMenu(type = "messages", .list = msgs)
  })
}

shinyApp(ui, server)

下面是一个Shiny定制版本的动态UI，更多关于使用动态UI,看到这个例子：

UI.R

library(shiny)
shinyUI(fluidPage(
  titlePanel("Dynamically generated user interface components"),
  fluidRow(

    column(, wellPanel(
      selectInput("input_type", "Input type",
        c("slider", "text", "numeric", "checkbox",
          "checkboxGroup", "radioButtons", "selectInput",
          "selectInput (multi)", "date", "daterange"
        )
      )
    )),

    column(, wellPanel(
      # This outputs the dynamic UI component
      uiOutput("ui")
    )),

    column(,
      tags$p("Input type:"),
      verbatimTextOutput("input_type_text"),
      tags$p("Dynamic input value:"),
      verbatimTextOutput("dynamic_value")
    )
  )
))

server.R

library(shiny)
shinyServer(function(input, output) {

  output$ui <- renderUI({
    if (is.null(input$input_type))
      return()

    # Depending on input$input_type, we'll generate a different
    # UI component and send it to the client.
    switch(input$input_type,
      "slider" = sliderInput("dynamic", "Dynamic",
                             min = , max = , value = ),
      "text" = textInput("dynamic", "Dynamic",
                         value = "starting value"),
      "numeric" =  numericInput("dynamic", "Dynamic",
                                value = ),
      "checkbox" = checkboxInput("dynamic", "Dynamic",
                                 value = TRUE),
      "checkboxGroup" = checkboxGroupInput("dynamic", "Dynamic",
        choices = c("Option 1" = "option1",
                    "Option 2" = "option2"),
        selected = "option2"
      ),
      "radioButtons" = radioButtons("dynamic", "Dynamic",
        choices = c("Option 1" = "option1",
                    "Option 2" = "option2"),
        selected = "option2"
      ),
      "selectInput" = selectInput("dynamic", "Dynamic",
        choices = c("Option 1" = "option1",
                    "Option 2" = "option2"),
        selected = "option2"
      ),
      "selectInput (multi)" = selectInput("dynamic", "Dynamic",
        choices = c("Option 1" = "option1",
                    "Option 2" = "option2"),
        selected = c("option1", "option2"),
        multiple = TRUE
      ),
      "date" = dateInput("dynamic", "Dynamic"),
      "daterange" = dateRangeInput("dynamic", "Dynamic")
    )
  })

  output$input_type_text <- renderText({
    input$input_type
  })

  output$dynamic_value <- renderPrint({
    str(input$dynamic)
  })

})

显示如下：

3.2.2通知notification

在dropdownMenu()函数中添加notificationItem()来包含一个文本通知。您还可以控制图标和状态的颜色。关于如何控制在后面会详细介绍。

dropdownMenu(type = "notifications",
  notificationItem(
    text = "5 new users today",
    icon("users")
  ),
  notificationItem(
    text = "12 items delivered",
    icon("truck"),
    status = "success"
  ),
  notificationItem(
    text = "Server load at 86%",
    icon = icon("exclamation-triangle"),
    status = "warning"
  )
)

动态交互：

library(shiny)
library(shinydashboard)
# ========== Dynamic dropdownMenu ==========
# Example message data in a data frame
messageData <- data.frame(
  text = c("5 new users today", "12 items delivered", "Server load at 86%"),
  status = c(
    "success",
    "warning",
    "warning"
  ),
  stringsAsFactors = FALSE
)

ui <- dashboardPage(
  dashboardHeader(
    title = "Dynamic menus",
    dropdownMenuOutput("notificationsMenu")
  ),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      box(
        title = "Controls",
        sliderInput(, , )
      )
    )
  )
)

server <- function(input, output) {
  output$notificationsMenu <- renderMenu({
    msgs <- apply(messageData, , function(row) {
      notificationItem(
        text = row[["text"]],
        status = row[["status"]]
      )
    })

    dropdownMenu(type = "notifications", .list = msgs)
  })
}

shinyApp(ui, server)

3.2.3任务tasks菜单

任务项有一个进度条和一个文本标签。您还可以指定进度条的颜色，你可以使用? validColors列出可以有效的颜色。

red yellow aqua blue light-blue green navy teal olive lime orange fuchsia purple maroon black

代码如下：

dropdownMenu(type = "tasks", badgeStatus = "success",
  taskItem(value = , color = "green",
    "Documentation"
  ),
  taskItem(value = , color = "aqua",
    "Project X"
  ),
  taskItem(value = , color = "yellow",
    "Server deployment"
  ),
  taskItem(value = , color = "red",
    "Overall project"
  )
)

3.2.4禁用标题头

如果你不想显示标题栏,您可以禁用它:

dashboardHeader(disable = TRUE)

3.3Sidebar

侧边栏通常用于快速导航，它包含像tabPanel标签的菜单项,、以及shiny的输入,如滑块和文本输入等，如下图所示：

3.3.1侧边栏菜单项和选项卡

侧边栏中的链接可以像shiny中的tabPanels使用。也就是说,当你点击一个链接,它将在仪表板的主体中显示不同的内容。下面是一个tabPanel的简单例子:

当用户单击其中一个菜单项,它转换显示在主体中的内容：

这些菜单项都放在sidebarMenu()方法中,如下所示。利用tabItem匹配一个menuItem,确保他们有可以匹配的tabName值。

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

menuItem有一个图标icon选项, 由shiny的icon ()函数创建。(更多信息在后面会详细介绍。)badgeLabel和badgeColor为选项标记，分别是表示名和标记显示颜色。一个menuItem除了控制标签可以做其他的事情;它还可以包含一个外部链接的内容,如果你为href提供一个值。默认情况下,这些外部链接打开一个新的浏览器标签或窗口;这可以通过newtab选项达到效果。

menuItem("Source code", icon = icon("file-code-o"),
           href = "https://github.com/rstudio/shinydashboard/")

下面为示例：

library(shiny)
library(shinydashboard)
# ========== Dynamic dropdownMenu ==========
# Example message data in a data frame
messageData <- data.frame(
  text = c("5 new users today", "12 items delivered", "Server load at 86%"),
  status = c(
    "success",
    "warning",
    "warning"
  ),
  stringsAsFactors = FALSE
)

sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
    menuItem("Widgets", icon = icon("th"), tabName = "widgets",
             badgeLabel = "new", badgeColor = "green"),
    menuItem("百度搜索", icon = icon("file-code-o"),
             href = "http://www.baidu.com")
  )
)

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

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

ui <- dashboardPage(
  dashboardHeader(
    title = "Dynamic menus",
    dropdownMenuOutput("notificationsMenu")
  ),
  sidebar,
  body
)

server <- function(input, output) {
  output$notificationsMenu <- renderMenu({
    msgs <- apply(messageData, , function(row) {
      notificationItem(
        text = row[["text"]],
        status = row[["status"]]
      )
    })

    dropdownMenu(type = "notifications", .list = msgs)
  })
}

shinyApp(ui, server)

3.3.2动态内容

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-font-kerning:1.0pt;}

侧边栏菜单可以动态生成,renderMenu和sidebarMenuOutput。下面是一个示例应用程序与一个侧边栏,是在服务器端生成的。

ui <- dashboardPage(
  dashboardHeader(title = "Dynamic sidebar"),
  dashboardSidebar(
    sidebarMenuOutput("menu")
  ),
  dashboardBody()
)

server <- function(input, output) {
  output$menu <- renderMenu({
    sidebarMenu(
      menuItem("Menu item", icon = icon("calendar"))
    )
  })
}

shinyApp(ui, server)

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

也可以动态生成个人物品:

ui <- dashboardPage(
  dashboardHeader(title = "Dynamic sidebar"),
  dashboardSidebar(
    sidebarMenu(
      menuItemOutput("menuitem")
    )
  ),
  dashboardBody()
)

server <- function(input, output) {
  output$menuitem <- renderMenu({
    menuItem("Menu item", icon = icon("calendar"))
  })
}

shinyApp(ui, server)

3.3.3侧边栏加入输入项

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

侧边栏也可以包含普通的输入,如sliderInput和textInput：

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

shinydashboard还包括一个特殊类型的输入,sidebarSearchForm,如上面的截图所示，有一个搜索项。这本质上是一个特殊格式化的文本输入和actionButton动作按钮，它显示为一个放大镜图标(图标可以通过icon改变)。

sidebarSearchForm(textId = "searchText", buttonId = "searchButton",
                    label = "Search...")

对于这个搜索表单,相应的值在服务器端代码输入，分别是input$searchText和input$searchButton。

library(shiny)
library(shinydashboard)

ui<-dashboardPage(
  dashboardHeader(title = "Sidrbar inputs"),
  dashboardSidebar(
    sidebarSearchForm(textId = "searchText", buttonId = "searchButton",
                      label = "Search..."),
    sliderInput(, , ),
    textInput("text", "Text input:")
  ),
  dashboardBody(
    h2("鸢尾花数据集作图")
  )
)

server <- function(input, output){}

shinyApp(ui,server)

3.3.4隐藏侧边栏

dashboardSidebar(disable = TRUE)

3.4Body

仪表板页面的主体可以包含任何常规的shiny内容。然而,如果你创建一个仪表板你可能会想要更加结构化的东西。大部分仪表板的基本构建块是box。box反过来可以包含任何内容。

Boxes

boxes是主要的仪表板页面的构建块。box()函数可以创建一个基本的框,box的内容可以(大多数)是任何shiny的UI内容。

在一个典型的仪表板中,这些boxes将被放置在一个fluidRow()函数体中(稍后我们会看到更多关于仪表板布局介绍):

# This is just the body component of a dashboard
dashboardBody(
  fluidRow(
    box(plotOutput("plot1")),

    box(
      "Box content here", br(), "More box content",
      sliderInput(, , ),
      textInput("text", "Text input:")
    )
  )
)

完整程序如下：

library(shiny)
library(shinydashboard)

ui<-dashboardPage(
  dashboardHeader(title = "Sidrbar inputs"),
  dashboardSidebar(
    sidebarSearchForm(textId = "searchText", buttonId = "searchButton",
                      label = "Search..."),
    sliderInput(, , ),
    textInput("text", "Text input:")
  ),
  dashboardBody(
    fluidRow(
      box(plotOutput("plot1")),

      box(
        "Box content here",br(),"More box content",
        sliderInput(,,),
        textInput("text","Text input:")
      )
    )
  )
)

server <- function(input, output){
  )
  histdata <- rnorm()

  output$plot1<-renderPlot({
    hist(histdata)
  })

}

shinyApp(ui,server)

boxes可以使用title和status设置标题和标题条颜色

box(title = )),

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

可以通过solidHeader = TRUE设置固体头（长度一定的solid header）,并通过collapsible=TRU在右上角显示一个最小化按钮（或者称折叠按钮）

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

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

如果你想要boxes在顶部没有灰色或彩色栏,使用solidHeader = TRUE，但不设置status参数，即可将上部分的灰色条或者彩色条去掉:

box(
  title = "Histogram", solidHeader = TRUE,
  collapsible = TRUE,
  plotOutput()
),

box(
  title = "Inputs", solidHeader = TRUE,
  "Box content here", br(), "More box content",
  sliderInput(, , ),
  textInput("text", "Text input:")
)

最后，还可以使用background选项设置固定的背景：

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

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

3.4.1tabBox

如果你想要一个box显示不同内容的标签，可以使用tabBox

tabBox(..., id = NULL, selected = NULL, title = NULL, width = ,
  height = NULL, side = c("left", "right"))
...：包含在tabset中的tabPanel元素
id:如果给出id值，可以在sever端使用input$id决定激活哪一个标签。其值应该对应于传递给tabPanel的值参数
selected:标签的值value（如果没有给出，指的是title）是否默认选中，如果为NULL这默认选中第一个标签
title：tabBox标题
width：box的宽度
height：box的高度
side：box的标签显示在box的左和右（left or right）。当在右边显示的时候，标签的顺序会翻转

tabPanel(title, ..., value = title, icon = NULL)
title：标签标题
…:加入到tab中的UI元素
value：当tabsetPanel发现tab被选中的时候应该发送的值。如果省略并且tabsetPanel具有id，将会使用title的值（默认情况下）。
icon：图标

上面的截图有以下代码产生，tabBox有点像shiny的tabsetPanel，用tabsetPanel作为输入，让你可以选择其中一个标签，并且安排标签的位置（id）。如果其id当前被选中，sever中的相应的tab被选中，就如下面的代码一样，它使用input$tabset1来进行交互，获得选中的标签名。

同样,tabBox与Box也是相似的，可以通过height、width、title控制它的高度、宽度和标题。并且，还可以通过side选项选择标签显示在tabBox的哪一边。但需要注意的是，如果side = "right"，标签会显示相反的顺序。

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
    })
  }
)

3.4.2infoBox

infoBox,在其左边显示大图标，在其右边部分显示一个标题,值(通常是一个数字),和一个可选的较小的副标题。
infoBox(title, value = NULL, subtitle = NULL,
  icon = shiny::icon(,
  href = NULL, fill = FALSE)
title： 显示的文本标题，英文会自动转为大写字母
value： 显示在box中的值，通常是一个数或者较短的文本
subtitle:副标题文本（可选）
icon：图标 由shiny::icon()创建
color：box的颜色设置
width：box的宽度设置
href:URL外部链接选项
fill：默认为FALSE,如果为FALSE则其内容部分使用白色背景，而color参数设置的颜色填充icon图标部分；如果为TRUE则使用color参数设置的颜色填充文本背景，同事icon图标使用的背景颜色与之相同，但是为暗色。

有一种特殊的box,用于显示简单的数字或文本值并带有一个图标。下面是一些例子:

上面的截图由下面代码中的infoBox产生。

library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Info boxes"),
  dashboardSidebar(),
  dashboardBody(
    # infoBoxes with fill=FALSE
    fluidRow(
      # A static infoBox静态的infoBox
      infoBox( * , icon = icon("credit-card")),
      # Dynamic infoBoxes两个动态infoBox
      infoBoxOutput("progressBox"),
      infoBoxOutput("approvalBox")
    ),

    # infoBoxes with fill=TRUE
    fluidRow(
      infoBox( * , icon = icon("credit-card"), fill = TRUE),
      infoBoxOutput("progressBox2"),
      infoBoxOutput("approvalBox2")
    ),

    fluidRow(
      # Clicking this will increment the progress amount
      box(width = , actionButton("count", "Increment progress"))
    )
  )
)

server <- function(input, output) {
  output$progressBox <- renderInfoBox({
    infoBox(
       + input$count, "%"), icon = icon("list"),
      color = "purple"
    )
  })
  output$approvalBox <- renderInfoBox({
    infoBox(
      "Approval", "80%", icon = icon("thumbs-up", lib = "glyphicon"),
      color = "yellow"
    )
  })

  # Same as above, but with fill=TRUE
  output$progressBox2 <- renderInfoBox({
    infoBox(
       + input$count, "%"), icon = icon("list"),
      color = "purple", fill = TRUE
    )
  })
  output$approvalBox2 <- renderInfoBox({
    infoBox(
      "Approval", "80%", icon = icon("thumbs-up", lib = "glyphicon"),
      color = "yellow", fill = TRUE
    )
  })
}

shinyApp(ui, server)

3.4.3valueBox

valueBox在大型文本中显示一个值(通常是一个数),其下面有一个较小的副标题,在右边加入一个大图标。valueBox通常作为仪表板的主体。

valueBox(value, subtitle, icon = NULL, color = ,href = NULL)
value：box中显示的值，通常是一个数或者较短的文本
subtitle：副标题
icon：icon标签，由icon()创建
color：box颜色
width：box的宽度
herf：URL链接选项

valueBox与infobox有点相似，只是在外观上有不同：

下面的代码产生一些valueBox。跟上面的infobox相同，有一些是静态的又一些事动态的：

library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Value boxes"),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      # A static valueBox
      valueBox( * , "New Orders", icon = icon("credit-card")),

      # Dynamic valueBoxes
      valueBoxOutput("progressBox"),

      valueBoxOutput("approvalBox")
    ),
    fluidRow(
      # Clicking this will increment the progress amount
      box(width = , actionButton("count", "Increment progress"))
    )
  )
)

server <- function(input, output) {
  output$progressBox <- renderValueBox({
    valueBox(
      paste0( + input$count, "%"), "Progress", icon = icon("list"),
      color = "purple"
    )
  })

  output$approvalBox <- renderValueBox({
    valueBox(
      "80%", "Approval", icon = icon("thumbs-up", lib = "glyphicon"),
      color = "yellow"
    )
  })
}

shinyApp(ui, server)

Layouts

布局boxes要求有一定the Bootstrap grid layout system知识。body可以被视为划分为相等宽度，有任意行，高度可变的12列的区域,和任意数量的行,变量高度。当你把一个box(或其他item)加入到网格中的时候,您可以指定需要占用12列中的多少列。一般来说,布局框有两种方法:基于行的布局row-based layout,或基于列的布局column-based layout。

3.4.4Row-based layout基于行的布局

在基于行的布局中,box由fluidRow()安排在一行。行的网格宽度为12,所以box的宽度width=4占据三分之一的宽度,和box宽度width=6(默认)占用一半的宽度。基于行的布局,每一行采用顶部对齐，底部可能不不是对齐的——这取决于每个box的内容。基于行的布局看起来像这样:

body <- dashboardBody(
  fluidRow(
    box(title = "Box title", "Box content"),
    box(status = "warning", "Box content")
  ),

  fluidRow(
    box(
      title = , solidHeader = TRUE, status = "primary",
      "Box content"
    ),
    box(
      title = , solidHeader = TRUE,
      "Box content"
    ),
    box(
      title = , solidHeader = TRUE, status = "warning",
      "Box content"
    )
  ),

  fluidRow(
    box(
      width = , background = "black",
      "A box with a solid black background"
    ),
    box(
      title = , background = "light-blue",
      "A box with a solid light-blue background"
    ),
    box(
      title = , background = "maroon",
      "A box with a solid maroon background"
    )
  )
)

# We'll save it in a variable `ui` so that we can preview it in the console
ui <- dashboardPage(
  dashboardHeader(title = "Row layout"),
  dashboardSidebar(),
  body
)

# Preview the UI in the console
shinyApp(ui = ui, server = function(input, output) { })

3.4.5Column-based layout基于列的布局

fluidRow()添加column()，下面的程序制定特定的宽度，每一个box都设定了width=NULL。

body <- dashboardBody(
  fluidRow(
    column(width = ,
      box(
        title = "Box title", width = NULL, status = "primary",
        "Box content"
      ),
      box(
        title = "Title 1", width = NULL, solidHeader = TRUE, status = "primary",
        "Box content"
      ),
      box(
        width = NULL, background = "black",
        "A box with a solid black background"
      )
    ),

    column(width = ,
      box(
        status = "warning", width = NULL,
        "Box content"
      ),
      box(
        title = "Title 3", width = NULL, solidHeader = TRUE, status = "warning",
        "Box content"
      ),
      box(
        title = "Title 5", width = NULL, background = "light-blue",
        "A box with a solid light-blue background"
      )
    ),

    column(width = ,
      box(
        title = "Title 2", width = NULL, solidHeader = TRUE,
        "Box content"
      ),
      box(
        title = "Title 6", width = NULL, background = "maroon",
        "A box with a solid maroon background"
      )
    )
  )
)

# We'll save it in a variable `ui` so that we can preview it in the console
ui <- dashboardPage(
  dashboardHeader(title = "Column layout"),
  dashboardSidebar(),
  body
)

# Preview the UI in the console
shinyApp(ui = ui, server = function(input, output) { })

3.4.6Mixed row and column layout行列混合布局

下面的例子中，上部分的box采用基于行的布局，下部分的box采用基于列的不布局：

body <- dashboardBody(
  fluidRow(
    box(
      title = , status = "primary",
      "Box content"
    ),
    box(
      status = ,
      "Box content"
    )
  ),

  fluidRow(
    column(width = ,
      box(
        title = "Title 1", width = NULL, solidHeader = TRUE, status = "primary",
        "Box content"
      ),
      box(
        width = NULL, background = "black",
        "A box with a solid black background"
      )
    ),

    column(width = ,
      box(
        title = "Title 3", width = NULL, solidHeader = TRUE, status = "warning",
        "Box content"
      ),
      box(
        title = "Title 5", width = NULL, background = "light-blue",
        "A box with a solid light-blue background"
      )
    ),

    column(width = ,
      box(
        title = "Title 2", width = NULL, solidHeader = TRUE,
        "Box content"
      ),
      box(
        title = "Title 6", width = NULL, background = "maroon",
        "A box with a solid maroon background"
      )
    )
  )
)

# We'll save it in a variable `ui` so that we can preview it in the console
ui <- dashboardPage(
  dashboardHeader(title = "Mixed layout"),
  dashboardSidebar(),
  body
)

# Preview the UI in the console
shinyApp(ui = ui, server = function(input, output) { })

4.炫酷外观

4.1皮肤skins

仪表盘包括很多的主题或者皮肤。默认的为blue蓝色，此外，还有其他的颜色，包括：black黑色，purple紫色，green绿色，red红色，yellow黄色等。可以使用dashboardPage(skin = "blue"), dashboardPage(skin = "black")等进行设置。

ui <- dashboardPage(skin = "black",
  dashboardHeader(title = "Value boxes"),
  dashboardSidebar(),
  dashboardBody()
)

4.2注销面板logout panel

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

(这需要shinydashboard 0.5.1或更高版本显示。)当shinydashboard应用运行shiny服务器之前，需要经过身份验证的用户才能登录,面板在右上角显示用户名和注销链接。

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

注销面板与shinydashboard更很好地集成。正如你所看到的在上面的截图中,默认注销面板部分掩盖了下拉菜单图标。我们可以添加一个用户面板与动态UI(在服务器上生成)和隐藏默认注销面板,如下所示:

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

程序：

library(shiny)
library(shinydashboard)
library(httr)
library(jsonlite)
library(data.table)
library(dplyr)
library(rvest)
library(magrittr)

ui <- dashboardPage(
  dashboardHeader(
    title = "SSP logout",
    dropdownMenu(type = "messages", badgeStatus = "success",
                 messageItem("Message 1", "Content of a message.")
    )
  ),
  dashboardSidebar(
    # Custom CSS to hide the default logout panel
    tags$head(tags$style(HTML('.shiny-server-account { display: none; }'))),

    # The dynamically-generated user panel
    uiOutput("userpanel"),

    sidebarMenu(
      menuItem("Menu item 1", icon = shiny::icon("calendar"))
    )
  ),
  dashboardBody()
)

server <- function(input, output, session) {
  # Generate the dynamic UI for the logout panel
  output$userpanel <- renderUI({

    # session$user is non-NULL only in authenticated sessions
    if (!is.null(session$user)) {
      sidebarUserPanel(
        span("Logged in as ", session$user),
        subtitle = a(icon("sign-out"), "Logout", href="__logout__"))
    }
  })
}

shinyApp(ui, server)

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

其他程序：

library(shiny)
library(shinydashboard)
library(httr)
library(jsonlite)
library(data.table)
library(dplyr)
library(rvest)
library(magrittr)

header <- dashboardHeader(title="CYBER Dashboard")

sidebar <- dashboardSidebar()

body <- dashboardBody(
  fluidPage(
    fluidRow(
      a(href="http://isc.sans.org/",
        target="_blank", uiOutput("infocon")),
      a(href="http://www.symantec.com/security_response/threatcon/",
        target="_blank", uiOutput("threatcon")),
      a(href="http://webapp.iss.net/gtoc/",
        target="_blank", uiOutput("alertcon"))
    )
  )
)

ui <- dashboardPage(header, sidebar, body, skin="black")

server <- function(input, output) {

  output$infocon <- renderUI({

    infocon_url <- "https://isc.sans.edu/api/infocon?json"
    infocon <- fromJSON(content(GET(infocon_url)))

    valueBox(
      value="Yellow",
      subtitle="SANS Infocon",
      icon=icon("bullseye"),
      color=ifelse(infocon$status=="test", "blue", infocon$status)
    )

  })
  output$threatcon <- renderUI({

    pg <- html("http://www.symantec.com/security_response/#")
    pg %>%
      html_nodes("div.colContentThreatCon > a") %>%
      html_text() %>%
      extract() -> threatcon_text

    tcon_map <- c("green", "yellow", "orange", "red")
    names(tcon_map) <- c("Level 1", "Level 2", "Level 3", "Level 4")
    threatcon_color <- unname(tcon_map[gsub(":.*$", "", threatcon_text)])

    threatcon_text <- gsub("^.*:", "", threatcon_text)

    valueBox(
      value=threatcon_text,
      subtitle="Symantec ThreatCon",
      icon=icon("tachometer"),
      color=threatcon_color
    )

  })

  output$alertcon <- renderUI({

    pg <- html("http://xforce.iss.net/")
    pg %>%
      html_nodes(xpath="//td[@class='newsevents']/p") %>%
      html_text() %>%
      gsub(" -.*$", "", .) -> alertcon_text

    acon_map <- c("green", "blue", "yellow", "red")
    names(acon_map) <- c("AlertCon 1", "AlertCon 2", "AlertCon 3", "AlertCon 4")
    alertcon_color <- unname(acon_map[alertcon_text])

    valueBox(
      value=alertcon_text,
      subtitle="IBM X-Force",
      icon=icon("warning"),
      color=alertcon_color
    )

  })

}

shinyApp(ui, server)

4.3CSS

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-font-kerning:1.0pt;}

You can add custom CSS to your app by creating a www/ subdirectory to your app and adding a CSS file there. Suppose, for example, you want to change the title font of your dashboard to the same font as the rest of the dashboard, so that it looks like this:

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-font-kerning:1.0pt;}

To do this, first create a file named www/custom.css with the following:

.main-header .logo { font-family: "Georgia", Times, "Times New Roman", serif; font-weight: bold; font-size: 24px; }

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-font-kerning:1.0pt;}

Then refer to that CSS file from the UI of your app:

## ui.R ## dashboardPage( dashboardHeader(title = "Custom font"), dashboardSidebar(), dashboardBody( tags$head( tags$link(rel = "stylesheet", type = "text/css", href = "custom.css") ) ) )

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-font-kerning:1.0pt;}

A second way to include CSS is to put it directly in the UI code for your app:

## ui.R ## dashboardPage( dashboardHeader(title = "Custom font"), dashboardSidebar(), dashboardBody( tags$head(tags$style(HTML(' .main-header .logo { font-family: "Georgia", Times, "Times New Roman", serif; font-weight: bold; font-size: 24px; } '))) ) )

4.4长标题

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-font-kerning:1.0pt;}

In some cases, the title that you wish to use won’t fit in the default width in the header bar. You can make the space for the title wider with the titleWidth option. In this example, we’ve increased the width for the title to 450 pixels, and also set the background color of the title area (using custom CSS) to be the same as the rest of the header bar.

shinyApp( ui = dashboardPage( dashboardHeader( title = "Example of a long title that needs more space", titleWidth = ), dashboardSidebar(), dashboardBody( # Also add some custom CSS to make the title background area the same # color as the rest of the header. tags$head(tags$style(HTML(' .skin-blue .main-header .logo { background-color: #3c8dbc; } .skin-blue .main-header .logo:hover { background-color: #3c8dbc; } '))) ) ), server = function(input, output) { } )

4.5侧边栏宽度sidebar width

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-font-kerning:1.0pt;}

To change the width of the sidebar, you can use the width option. This example has a wider title and sidebar:

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

4.6图标icon

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-font-kerning:1.0pt;}

Icons are used liberally in shinydashboard. The icons used in Shiny and shinydashboard are really just characters from special font sets, and they’re created with Shiny’s icon() function.

To create a calendar icon, you’d call:

icon("calendar")

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-font-kerning:1.0pt;}

This simply generates HTML like this, which the browser knows what to do with:

<i class="fa fa-calendar"></i>

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-font-kerning:1.0pt;}

The icons are from Font-Awesome and Glyphicons. You can see lists of all available icons here:

http://fontawesome.io/icons/

http://getbootstrap.com/components/#glyphicons

By default, the icon() function uses icons from Font-Awesome. To use Glyphicons, use lib="glyphicon")

"Calendar from Font-Awesome:", icon("calendar"), "Cog from Glyphicons:", icon("cog", lib = "glyphicon")

4.7状态和颜色statuses and colors

许多shinydashboard组件有一个状态或颜色的参数。status is a property of some Bootstrap classes. It can have values like status="primary", status="success", and others. The image below shows which colors they usually are associated with:

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-font-kerning:1.0pt;}

The color argument is more straightforward. It can have values like color="red", color="black", and others. Here are the names and appearances of colors:

The valid statuses and colors are also listed in ?validStatuses and ?validColors.

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-font-kerning:1.0pt;}

v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}

参考：

http://rstudio.github.io/shinydashboard/

转载请注明链接：

http://www.cnblogs.com/homewch/p/5659293.html

Normal
0
false

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-font-kerning:1.0pt;}

最新文章

mapreduce性能提升2

set JAVA_HOME in RHEL/CentOS

Rman备份的保留策略(retention policy)

(转)HTML5开发学习（2）:本地存储之localStorage 、sessionStorage、globalStorage

ANDROID内存优化——大汇总（转）

Ubuntu Kylin14.04终于可以使用root登陆了

[改善Java代码]让工具类不可实例化

[Node.js] Creating Demo APIs with json-server

twsited(4)--不同模块用redis共享以及用web发送数据到tcpserver

Gengxin讲STL系列目录

python实现简单表单校验框架

Mysql 掌握要点

Python第二十六天 python装饰器

Linux命令学习: grep命令

Python编程：从入门到实践（选记）

使用Future停止超时任务

Office 365 API Tools预览版已提供下载

mint下截图工具shutter的安装和使用设置

Android 多线程注意事项

OpenGL 加载DDS文件（压缩纹理）

热门文章

JavaScript数组排序

mysql 得到重复的记录

谈谈我的编程之路---WAMP(二)

-A 解决数据库表太多，预读表时间很长

.net学习之泛型、程序集和反射

Delphi按下F1不能出现帮助文档的解决方法

【openGL】画直线

java.lang.UnsupportedClassVersionError: org/xwiki/xxx : Unsupported major.minor version 51.0

檢查RAC狀態

VMWARE虚拟机CentOS6.4系统使用主机无线网卡上网的三种方法介绍

巴特西

shinydashboard包---为shiny提供BI框架

1.安装

2.基础知识

3.结构---Shiny and HTML

3.1结构概述

3.2Header

3.2.1消息message菜单

3.2.2通知notification

3.2.3任务tasks菜单

3.2.4禁用标题头

3.3.1侧边栏菜单项和选项卡

3.3.2动态内容

3.3.3侧边栏加入输入项

3.3.4隐藏侧边栏

3.4Body

3.4.1tabBox

3.4.2infoBox

3.4.3valueBox

3.4.4Row-based layout基于行的布局

3.4.5Column-based layout基于列的布局

3.4.6Mixed row and column layout行列混合布局

4.炫酷外观

4.1皮肤skins

4.2注销面板logout panel

4.3CSS

4.4长标题

4.5侧边栏宽度sidebar width

4.6图标icon

4.7状态和颜色statuses and colors

最新文章

热门文章