组件
前面推了两期有关dashboards的推文，可见：R文档沟通｜Dashboards入门（1）；R文档沟通｜Dashboards入门（2）
这期简介下dashboards中的各种各样的组件，包括：
- 基于 HTML 小部件的交互式 JavaScript 数据可视化图形。
- R 图形，包括基础、栅栏和网格图形；
- 表格（可选选项包括：排序，过滤和分页等）；
- 数值框（展示重要数据）；
- 仪表盘；
- 文本注释；
- 导航栏（提供与仪表盘相关的更多链接）。
注：无论输出格式如何，前三个组件在大多数 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") ) ```
![$E1]DM~7DQJALSEVW4YIX14.png](https://ucc.alicdn.com/pic/developer-ecology/c3f5ad30900c486da5f5500e7d913b03.png "$E1]DM~7DQJALSEVW4YIX14.png")
上图展示了三个并排的仪表，每个仪表都显示了一个数值和标题。这里我们重点解释下第三个代码块（### Spam per Day）。这里的valueBox() 函数定义了一个值(spam)和一个图标(icon = "fa-trash")。并使用 color 设置参数框的颜色。内部使用了一个ifelse()语句，使得不同值表示不同的颜色。当然，可用的颜色还包括："info", "success" 和 "danger"（默认值为："primary"）。你也可以指定任何有效的 CSS 颜色（例如："#ffffff"， "rgb(100, 100, 100)"等）。
仪表
仪表：在指定数值范围内显示仪表上的数值。例如，下面展示了三个仪表并排的结果（见下图）
--- 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) )) ```
结果如下所示：
这个示例需要解释以下几点：
- 通过
gauge()函数设置一个仪表盘。其内部三个参数需要确定：value，min和max（可以是任何数值）。 - 可以指定一个可选的符号（
symbol）和值一起显示(在示例中， "%" 用来表示百分比)。 - 可以使用
gaugeSectors()函数指定一组自定义的颜色扇区，默认颜色为绿色。扇区选项（sectors）可以指定三个值的范围(success,warning和danger) 使得仪表盘的颜色根据它的值变化而变化。
文本注释
你可以通过以下方式在仪表盘中包含额外的叙述说明：
- 在页面顶部加入相应文本内容。
- 定义不包含图表，而是仅包含任意内容(文本、图像和方程等)的指示板。
如图@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.
结果如下所示：
![NK`M]U~02L6RZXXZT}G~D@J.png](https://ucc.alicdn.com/pic/developer-ecology/ab84b068eba74d68a36c75d652ecd220.png "NK`M]U~02L6RZXXZT}G~D@J.png")
注：仪表盘中的每个组件都可以包括标题和注释部分。三级结构 (
###) 后面的文本为标题；>开头的文本是注释。
导航栏
默认情况下，仪表盘的导航栏包括：标题（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" ] ---
这时得到的界面如下所示：
![5P8Q%`KI6FIY4]W47Y@9}%F.png](https://ucc.alicdn.com/pic/developer-ecology/963bb1bddbe844beadbb13e3dfd7c60f.png "5P8Q%`KI6FIY4]W47Y@9}%F.png")
社交链接选项还包括："facebook", "twitter", "google-plus", "linkedin" 和 "pinterest"
