Dashboards 入门教程

庄闪闪
1,704 阅读9分钟

仪表盘在业务风格的报告中特别常见。它们可以用来突出报告的概要和关键内容。仪表盘的布局通常是基于网格搭建的，各个组件排列在各种大小的“盒子”中。

使用 flexdashboard 包，你可以

  • 使用 R Markdown 将一组相关数据可视化作为指示盘进行发布。
  • 嵌入各种各样的组件，包括 HTML 小部件、R 图形、表格数据和文本注释等内容。
  • 可以指定按行或列进行布局(各组件会自动调整大小以填满浏览器，并且在移动设备上也十分适配)。
  • 可以创建故事板来呈现可视化图形和相关注释。
  • 使用 Shiny 驱动动态可视化（可选）。

要创建一个仪表盘，你可以使用输出格式 flexdashboard::flex_dashboard 来创建一个 R Markdown 文档。当然更简单的方法是使用 File -> New File -> R Markdown 对话框在 RStudio 中创建文档，并选择 "Flex Dashboard" 模板。

注：如果你并没有使用 RStudio进行操作，那么你也可以从 R 控制台创建一个新的 flexdashboard R Markdown 文件，具体操作如下：

rmarkdown::draft(
  "dashboard.Rmd", template = "flex_dashboard",
  package = "flexdashboard"
)

flexdashboard 的完整文档如下： rmarkdown.rstudio.com/flexdashboa… 。本章只介绍一些基本特性和用法。仪表盘有许多与 HTML 文档相同的特性(Section @ref(html-document))，比如图形选项

(Section @ref(figure-options))，外观和风格@ref(appearance-and-style))，MathJax 公式 @ref(mathjax-equations))，头部和正文前后内容 (Section @ref(includes)) 和Pandoc参数(Section @ref(pandoc-arguments))，等等。所以如果有时间，建议大家也要把前面提到的几章看一下。同时，我们也建议你看看 R 帮助页面 ?flexdashboard::flex_dashboard 来了解更多 flexdashboard 的特性和选项。

排版

关于仪表盘布局的总体规则是：

  • 第一级：生成页面；
  • 第二级：生成列(或行)；
  • 第三级：生成框(包含一个或多个仪表盘组件)。

下面给出一个简单的例子：

---
title: "Get Started"
output: flexdashboard::flex_dashboard
---

​```{r setup, include=FALSE}
library(flexdashboard)
​```

Column 1
--------------------------------------------------

### Chart A

​```{r}
​```

Column 2
--------------------------------------------------

### Chart B

​```{r}
​```

### Chart C

​```{r}
​```

请注意，第一行文本（Coluumn）下的一系列破折号是第二级标题的另一种 Markdown 语法形式，即：

Column 1
--------------------------------------------------

等同于

## Column 1

我们使用了一系列的破折号，只是为了让第二节在源文档中更为突出。

默认情况下，第二节在仪表板上生成列，第三节在列中垂直堆叠。所以你不必在仪表盘上设置列，因为它默认会一列一列的垂直堆放显示。

第二节的文本将不会显示在输出中。第二节标题仅用于布局（例如，例子中的Column 1），因此标题的实际内容根本不重要。相比之下，第一级和第三级标题更加重要。

下图显示了上述示例的结果，一共是两列，第一列包含 “Chart A”，第二列包含 “Chart B” 和 “Chart C”。

注：我们并没有在代码块中加入任何 R 代码，所以所有的框都是空的。在这些代码块中，你可以编写任意的 R 代码来生成 R 图、HTML 小部件和 @ref(dashboard-components) 节中介绍的各种其他组件。

基于行的布局

你可以通过方向选项（orientation）将列导向的布局改为行导向的布局，例如：

output:
  flexdashboard::flex_dashboard:
    orientation: rows

这时第二级会按照行进行排列，第三级会按照行中的列进行排列。

节属性

第二节头部包含一些属性，例如：设置列宽度为350:

A narrow column {data-width=350}
--------------------------------

对于面向行的布局，可以为行设置 data-height 属性。 {.tabset} 可以应用到列上，这样第三节就会以制表符的形式排列，例如：

Two tabs {.tabset}
------------------

### Tab A

### Tab B

所得结果如下：

多页

当文档中有多个第一级内容时，它们将在仪表盘上显示为单独的页面。下面给出一个示例，如下图 所示。

---
title: "Multiple Pages"
output: flexdashboard::flex_dashboard
---

Visualizations {data-icon="fa-signal"}
===================================== 
    
### Chart 1
    
​```{r}
​```
    
### Chart 2

​```{r}
​```
   
Tables {data-icon="fa-table"}
=====================================     

### Table 1
    
​```{r}
​```
    
### Table 2

​```{r}
​```

注：一系列等号是第一级节标题的另一种 Markdown 语法(也可以使用单个井号 #)。

页面标题显示在仪表盘顶部的导航菜单中。在本例中，我们通过 data-icon 属性将图标应用于页面标题。当然，你可以从该网址 fontawesome.com 找到其他可用的图标。

故事板

除了基于列或行布局外，你还可以通过故事板（"storyboard"）布局呈现一系列可视化图形或相关评论。使用 storyboard 选项来启用它。

下面给出一个示例，如图下所示，顶部的左右导航按钮可帮助你浏览所有故事版内容。

---
title: "Storyboard Commentary"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
---

### A nice scatterplot here

​```{r}
plot(cars, pch = 20)
grid()
​```

---

Some commentary about Frame 1.

### A beautiful histogram on this board

​```{r}
hist(faithful$eruptions, col = 'gray', border = 'white', main = '')
​```

---

Some commentary about Frame 2.`r xfun::file_string('examples/dashboard/03-storyboard.Rmd')`

结果如下所示：

组件 {#dashboard-components}

仪表盘布局中可以包含各种各样的组件，包括：

  1. 基于 HTML 小部件的交互式 JavaScript 数据可视化。
  2. R 图形输出，包括基础、格栅和网格图形。
  3. 表格（排序，过滤和分页等可选选项）。
  4. 用于突出显示重要摘要数据的值框。
  5. 用于在指定范围内的仪表上显示值的仪表。
  6. 各种文本注释。
  7. 导航栏，提供与仪表板相关的更多链接。

注：无论输出格式如何，前三个组件在大多数 R Markdown 文档中均可使用。 而后四个组件是仪表特有的，本节我们会简要介绍它们。

数值框

如果你希望在仪表盘中包含一个或多个值。可以使用 flexdashboard 包中的 valueBox() 函数来显示单个值以及标题和可选图标。例如，下面有三个并列的部分，每个部分都显示单个值（输出见下图）：

---
title: "Dashboard Value Boxes"
output:
  flexdashboard::flex_dashboard:
    orientation: rows
---

​```{r setup, include=FALSE}
library(flexdashboard)
# these computing functions are only toy examples
computeArticles = function(...) return(45)
computeComments = function(...) return(126)
computeSpam = function(...) return(15)
​```

### Articles per Day

​```{r}
articles = computeArticles()
valueBox(articles, icon = "fa-pencil")
​```

### Comments per Day

​```{r}
comments = computeComments()
valueBox(comments, icon = "fa-comments")
​```

### Spam per Day

​```{r}
spam = computeSpam()
valueBox(
  spam, icon = "fa-trash",
  color = ifelse(spam > 10, "warning", "primary")
)
​```

结果如下所示：

image-20210731133024084

这里我们重点解释下第三个代码块(### Spam per Day)。这里valueBox() 函数定义了一个值(spam)并指定了一个图标(icon = "fa-trash")。并使用 color 参数框的颜色，使用了一个ifelse()语句，使得根据不同值会出现不同的颜色。当然，还有其他可用的颜色： "info", "success" 和 "danger"（默认值为： "primary"）。你也可以指定任何有效的 CSS 颜色（例如："#ffffff"， "rgb(100, 100, 100)"等）。

仪表

仪表在指定范围内显示仪表上的数值。例如，下面展示了一组三个仪表的情况（见图 @ref(fig:dashboard-gauges)）

---
title: "Dashboard Gauges"
output:
  flexdashboard::flex_dashboard:
    orientation: rows
---

​```{r setup, include=FALSE}
library(flexdashboard)
​```

### Contact Rate

​```{r}
gauge(91, min = 0, max = 100, symbol = '%', gaugeSectors(
  success = c(80, 100), warning = c(40, 79), danger = c(0, 39)
))
​```

### Average Rating 

​```{r}
gauge(37.4, min = 0, max = 50, gaugeSectors(
  success = c(41, 50), warning = c(21, 40), danger = c(0, 20)
))
​```

### Cancellations

​```{r}
gauge(7, min = 0, max = 10, gaugeSectors(
  success = c(0, 2), warning = c(3, 6), danger = c(7, 10)
))
​```

结果如下所示：

这个示例需要解释一下下面几点：

  1. gauge() 函数输出一个仪表盘。它有三个必需包含的参数：value， min 和 max (可以是任何数值)。
  2. 可以指定一个可选的符号（symbol）和值一起显示(在示例中， "%" 用来表示百分比)。
  3. 可以使用 gaugeSectors() 函数指定一组自定义的颜色扇区，默认颜色为绿色。扇区选项（sectors）可以指定三个值的范围(success, warning 和 danger)使得仪表盘的颜色根据它的值变化而变化。

文本注释

如果你需要在仪表盘中包含额外的叙述说明，你可以通过以下方式完成该需求：

  1. 在展示仪表盘之前，可以在页面顶部加入相应文本内容。
  2. 你可以定义不包含图表，而是包含任意内容(文本、图像和方程等)的指示板。

例如，下图顶部包含了一些内容说明和只右下角包含了一个只有内容的指示板(见图 @ref(fig:dashboard-text))：

---
title: "Text Annotations"
output:
  flexdashboard::flex_dashboard:
    orientation: rows
---

Monthly deaths from bronchitis, emphysema and asthma in the
UK, 1974–1979 (Source: P. J. Diggle, 1990, Time Series: A
Biostatistical Introduction. Oxford, table A.3)

​```{r setup, include=FALSE}
library(dygraphs)
​```

Row {data-height=600}
-------------------------------------

### All Lung Deaths

​```{r}
dygraph(ldeaths)
​```

Row {data-height=400}
-------------------------------------

### Male Deaths

​```{r}
dygraph(mdeaths)
​```

> Monthly deaths from lung disease in the UK, 1974–1979

### About dygraphs

This example makes use of the dygraphs R package. The dygraphs
package provides rich facilities for charting time-series data 
in R. You can use dygraphs at the R console, within R Markdown
documents, and within Shiny applications.

结果如下所示：

image-20210731133101057

注：仪表盘中的每个组件都可以包括标题和注释部分。标题是第三层 (###) 节标题后面的文本。注释是在产生组件输出的代码块之后以 > 开头的任何文本。

导航栏

默认情况下，仪表盘的导航栏包括：文档标题（title）、作者（author）和日期（date）。当仪表盘有多个页面(第@ref(multiple-pages)节)时，导航条的左侧还包括指向各个页面的链接。你还可以在仪表盘上添加社交链接。

此外，也可以使用 navbar 选项向导航栏添加自定义链接。例如，下面的选项在导航栏中添加了 "About" 链接：

---
title: "Navigation Bar"
output:
  flexdashboard::flex_dashboard:
    navbar:
      - { title: "About", href: "https://example.com/about" }
---

这时得到的界面如下所示：

导航栏项目必须包括标题或图标字段(或两者都包含)。你还应该包括一个 href 作为导航目标， align 也可以设置(默认为右)。

当然，你也可以通过 social 选项添加到社交共享服务的链接。例如，下面的仪表板包括 Twitter 和 Facebook 链接，以及一个包含更完整服务列表的下拉菜单：

---
title: "Social Links"
output:
  flexdashboard::flex_dashboard:
    social: [ "twitter", "facebook", "menu" ]
---

这时得到的界面如下所示：

社交选项还包括以下内容："facebook", "twitter", "google-plus", "linkedin" 和 "pinterest"。你还可以指定 "menu" 来提供包含所有服务的通用共享下拉菜单。

avatar
文章
阅读
粉丝