作者：李誉辉
四川大学在读研究生
前言
从本文开始连载shinydashboard与shiny_史上最全系列文章，本文章将分三部分连载：
第一部分：
1 简介
2 shiny文件的创建和运行
3 shinydashboard
3.1 标题栏(Header)
第二部分：
3.2 输入与输出
3.3 侧边栏
3.4 主体(Body)
3.5 布局(Layouts)
4 shiny框架
第三部分：
5 选项卡(tabset)
6 美化
7 CSS语法
8 与leaflet结合
9 web部署
1.简介
shiny常常用于交互式网页的制作，
内含多个模块，直接用R编写，也可以插入CSS语法，JS文件。
不需要懂得服务器的配置，也能制作交互式交互式网页。
在与客户或同事沟通的时候，更加简介明了，也可以将文件发布到服务器上。
总之应用非常广泛。shinydashboard是一个shiny的框架包，shinydashboard能实现的，直接使用shiny也能实现。
但是shiny中panels的布局较为繁琐,shinydashboard则更加友好，初学者上手更加快捷。shinydashboard的创建与shiny一致，服务器端的代码结构完全，只是添加了几个小元素。shinydashboard相当于对shiny做了一些封装，
所以shiny中的元素，shinydashboard都支持，只是外部框架不一样。
我们首先创建shiny文件，然后用shinydashboard生成交互式网页。shinydashboard学完后，再学习shiny就很清楚了。
2.shiny文件的创建和运行
shiny文件有2种类型： 一种是将UI端和server端分开的，
另一种是将UI端代码和server端代码合并在一起的。
2.1
UI与server分开的文件
首先新建一个ShinyApp, 步骤： File -> New File -> Shiny Web App 。 如图所示：
初次使用，为了便于理解，我们选择了Mutiple File(ui.R/server.R),并指定了工作目录。
并给Shiny程序命名为：Shiny_test_1。
然后在工作目录下就生成了2个R文件。如图所示：
我们打开ui.R文件。ui.R表示用户界面部分。
首先定义用户接口，用函数shinyUI()包裹page函数即可。
1library(shiny)
2
3# 自定义UI：每加仑汽车行驶里程
4shinyUI(pageWithSidebar(
5 # 主面板标题
6 headerPanel("Miles Per Gallon"),
7 # 定义侧边栏
8 sidebarPanel(),
9 mainPanel()
10))
然后打开server.R文件，server.R为服务器部分。
用shinyServer()包裹参数为input和output的函数即可。
1library(shiny)
2
3# 自定义服务器脚本
4shinyServer(function(input, output) {
5
6})
运行方式：
运行刚刚建立的Shiny程序，有2种方式：
方式一：将工作目录切换到Shiny程序所在的文件夹，我们这里选择R_setwd_documents。 然后运行
runApp("Shiny_test_1")。方式二，将工作目录切换到Shiny文件夹，我们这里选择Shiny_test_1。
然后运行runApp()。
方式一：
1library(shiny)
2
3setwd("E:/R_setwd_documents/Shiny_directory")
4runApp("Shiny_test_1")
2.2
UI与server组合的文件
UI与server组合的文件，即app.R, 创建方式如下图所示，选择single file即可：
然后打开刚刚创建的app.R, 以将page函数指定给变量ui,
将function函数指定给变量server即可，
最后增加1行shinyApp(ui = ui, server = server)以运行代码。
1library(shiny)
2
3ui <- pageWithSidebar()
4server <- function(input, output) {
5
6}
7
8# 运行代码
9shinyApp(ui, server)
3.shinydashboard
结构上主要分为3个部分：
dashboardPage( # 总函数。
dashboardHeader(), # 标题栏
dashboardSidebar(), # 侧边栏
dashboardBody() # 主体
)
当然，若代码太长，也可以拆开来写，这样阅读性更好：
header <- dashboardHeader()
sidebar <- dashboardSidebar()
body <- dashboardBody()
dashboardPage(header, sidebar, body)
3.1
标题栏(Header)
2个关键参数：title(总标题)和dropdownMenus(下拉菜单)。
3.1.1 总标题(title)
1dashboardHeader(title = "我的Dashboard")
3.1.2 下拉菜单(dropdownMenu)
dropdownMenu分为3种类型：
type = "messages"消息菜单。type = notifications通知菜单。type = tasks任务菜单。
分别内置messageItem(),notificationItem(), taskItem() 函数，用于添加items。
添加顺序决定下拉菜单的左右顺序。
3.1.2.1 消息菜单(Message)
icon图标用icon函数创建，shiny支持2个库的icon，分别是Font Awesome(https://fontawesome.com/)和
Glyphicons(https://www.glyphicons.com/)。
默认为Font Awesome库，通过名称进行匹配，将网页上的名称去掉前缀即可。
将下面的代码复制进ui.R中：
1library(shiny)
2library(shinydashboard)
3
4dashboardPage( # 总函数。
5 dashboardHeader(
6 title = "我的Dashboard",
7 dropdownMenu(type = "messages",
8 # 添加消息Items
9 messageItem(
10 from = "张老板", # 消息来源
11 message = "你要的货到了", # 消息内容
12 icon = icon(name = "handshake") # 默认Font Awesome库
13 ),
14 messageItem(
15 from = "老婆",
16 message = "我到机场了，你会来接我吗？",
17 icon = icon("plane", lib = "glyphicon"),
18 time = "13:45" # 标准时间格式
19 ),
20 messageItem(
21 from = "陈女士",
22 message = "你送的花到了，很漂亮，我喜欢",
23 icon = icon("female", lib = "font-awesome"),
24 time = "2014-12-01" # 标准日期格式
25 )
26 )
27 ),
28 dashboardSidebar(), # 侧边栏
29 dashboardBody() # 主体
30)
将下面的代码复制进server.R中：
1library(shiny)
2
3shinyServer(function(input, output) {})
然后运行下面代码：
1library(shiny)
2
3setwd("E:/R_setwd_documents/Shiny_directory")
4runApp('Shiny_test_1')
结果如下：
3.1.2.1.1 动态消息(Dynamic content)
大多数情况下，我们需要通过服务器端来定义下拉菜单的内容， 而不是通过UI界面来定义下拉菜单的内容。
这时候UI端需要用到dropdownMenuOutput()。
同时在后台使用renderMenu()进行提交。
将下面代码复制到ui.R中：
1library(shiny)
2library(shinydashboard)
3
4dashboardPage(
5 dashboardHeader(
6 title = "动态消息",
7 dropdownMenuOutput("messageMenu") # 以下拉菜单形式输出messageMenu变量
8 ),
9 dashboardSidebar(),
10 dashboardBody()
11)
将下面的代码复制到server.R中：
1library(shiny)
2library(shinydashboard)
3
4# 首先获取消息数据框
5messageData <- data.frame(
6 from = c("张老板", "老婆", "陈女士"),
7 message = c(
8 "你要的货到了",
9 "我到机场了，你会来接我吗？",
10 "你送的花到了，很漂亮，我喜欢"
11 ),
12 iconname = c("handshake", "plane", "female"),
13 iconlib = c("font-awesome", "glyphicon", "font-awesome"),
14 time = c(NA, "13:45", "2014-12-01"),
15 stringsAsFactors = FALSE
16)
17
18# 定义服务器脚本
19shinyServer(function(input, output) {
20 output$messageMenu <- renderMenu({ # 给output对象增加变量messageMenu
21 # 对数据框每一行进行处理，创建items
22 msgs <- apply(messageData, 1, function(row) {
23 messageItem(from = row[["from"]],
24 message = row[["message"]],
25 icon = icon(name = row[["iconname"]], lib = row[["iconlib"]]),
26 time = row[["time"]])
27 })
28 # 将msgs变量当做messages进行输出
29 dropdownMenu(type = "messages", .list = msgs)
30 })
31})按上一小节的方式运行，结果如下：
3.1.2.2 通知菜单(Notification)
通知菜单与消息菜单类似，
新增参数status,表述item的状态，决定items的背景颜色。
UI端代码如下：
1library(shiny)
2library(shinydashboard)
3
4dashboardPage( # 总函数。
5 dashboardHeader(
6 title = "我的Dashboard",
7 dropdownMenu(type = "notifications",
8 notificationItem(
9 text = "今日新增5个用户",
10 icon("users")
11 ),
12 notificationItem(
13 text = "12件货物已送达",
14 icon("truck"),
15 status = "success"
16 ),
17 notificationItem(
18 text = "服务器已加载86%",
19 icon = icon("exclamation-triangle"),
20 status = "warning"
21 )
22 ),
23 dropdownMenu(type = "messages",
24 # 添加消息Items
25 messageItem(
26 from = "张老板", # 消息来源
27 message = "你要的货到了", # 消息内容
28 icon = icon(name = "handshake") # 默认Font Awesome库
29 ),
30 messageItem(
31 from = "老婆",
32 message = "我到机场了，你会来接我吗？",
33 icon = icon("plane", lib = "glyphicon"),
34 time = "13:45" # 标准时间格式
35 ),
36 messageItem(
37 from = "陈女士",
38 message = "你送的花到了，很漂亮，我喜欢",
39 icon = icon("female", lib = "font-awesome"),
40 time = "2014-12-01" # 标准日期格式
41 )
42 )
43
44 ),
45 dashboardSidebar(), # 侧边栏
46 dashboardBody() # 主体
47)
下面是运行结果：
3.1.2.3 任务菜单(Task)
任务菜单有一个进度条，可以添加文本标签，还可以设定进度条颜色。
进度条value用0~100的数字指定， 颜色只支持部分R中的颜色，见?validColors。
下面是UI端代码部分，其它部分与前面相同：
1dropdownMenu(type = "tasks", badgeStatus = "success",
2 taskItem(value = 90, color = "green",text = "文档"),
3 taskItem(value = 17, color = "aqua",text = "X项目"),
4 taskItem(value = 75, color = "yellow",text = "服务器部署"),
5 taskItem(value = 80, color = "red",text = "总进程")
6 )
运行结果如下：
3.1.3 无标题(disable)
如果想要标题栏为空，则dashboardHeader(disable = TRUE)。
往期精彩：
公众号后台回复关键字即可学习
回复 爬虫 爬虫三大案例实战
回复 Python 1小时破冰入门
回复 数据挖掘 R语言入门及数据挖掘
回复 人工智能 三个月入门人工智能
回复 数据分析师 数据分析师成长之路
回复 机器学习 机器学习的商业应用
回复 数据科学 数据科学实战
回复 常用算法 常用数据挖掘算法