shinydashboard与shiny_史上最全（一）

2019-03-14 本文已影响14人天善智能

欢迎关注天善智能，我们是专注于商业智能BI，人工智能AI，大数据分析与挖掘领域的垂直社区，学习，问答、求职一站式搞定！

对商业智能BI、大数据分析挖掘、机器学习，python，R等数据领域感兴趣的同学加微信：tstoutiao，邀请你进入数据爱好者交流群，数据爱好者们都在这儿。

作者：李誉辉

四川大学在读研究生

前言

从本文开始连载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)。

往期精彩：

如何优雅的使用全球最大同性社交网站

金三银四求职季，七周成为数据分析师

R语言中文社区2018年终文章整理（作者篇）

R语言中文社区2018年终文章整理（类型篇）

公众号后台回复关键字即可学习

回复爬虫            爬虫三大案例实战
回复 Python       1小时破冰入门
回复数据挖掘     R语言入门及数据挖掘
回复人工智能     三个月入门人工智能
回复数据分析师  数据分析师成长之路
回复机器学习     机器学习的商业应用
回复数据科学     数据科学实战
回复常用算法常用数据挖掘算法

你最“好看”，你可以点