概述
2016年制作 Dashboard 是一种怎样的体验？我们想要的：
响应式+自适应+移动先行+敏捷开发+模块化+微服务+单页面应用，
相信这些一定已经成为了前端开发的标准配置。那我们需要使用
yarn+jquery+react+nodejs+webpack+seajs+echarts
等等前端工具才能完成我们的数据可视化吗？
2016年的Dashboard已经不一定需要如此复杂的前端组件了，由于Dashboard已经是一个较为成熟的领域，常用的组件已经模块化，而Dashboard最为复杂的部分其实在于 响应式钻取交互分析，而数据处理这件事情其实并不是前端工程师最擅长的事情，如果可以让最擅长数据处理的人来完成 多图表 响应式 交互式 钻取分析那么这不失为一种好的解决方案。本文将讨论在R语言中使用 flexdashboard的dashboard开发方法，用markdown完成dashboard不是梦。
制作工艺
让我们来看看这样一个 MVC 工作流（Model + Visz + Controller）：
1.首先，数据分析师接到产品运营团队的Dashboard需求，数据分析师在服务器上写一些简单的SQL，对数据进行初步分析。
2.然后，通过初步分析明确了需要的数据范围，向DBA申请某区间数据，完成数据源 Models 的定义。==》Model
3.接着，写了一连串的SQL语句做数据的进一步分析，这里实际上就是定义了一些 DAG（通常在R中可以组合使用sqldf(小数据集)或者dplyr（大数据集）来流畅完成）==》Controller
4.最后，数据再经过图层叠加、分组、切面、交互式、自适应等等方式渲染做数据可视化。==》Visz
什么是 flexdashboard
flexdashboard 是一个基于Rmarkdown的仪表盘，易于编排和发布，且兼容移动端显示。一方面，由于flexdashboard可以利用htmlwidgets套件来完成丰富的可视化工作，比如柱状图、折线图、表格等等，所以在图表呈现方面非常惊艳。另一方面，它还允许运行在shiny服务器上，支持响应式编程特性，通过可交互的界面操作就可以完成直观的数据钻取工作。
flexdashboard真的使得制作Dashboard的成本和效率得到了提升！
flexdashboard 语法归纳
排版语法（HTML）
| 组件 | 语法 | 布局 | 元素 |
|---|---|---|---|
| 标题 | # | ======= | Page |
| 方向 | ## | ------------- | Column (或者 Row 如果在yaml中选择 orientation: row) |
| 区块 | ### | Box |
元素配置（CSS）
| 配置 | 效果 |
|---|---|
| {.mobile} | 只在移动端显示 |
| {.no-mobile} | 移动端不显示 |
| {.no-padding} | 无边距图标 (默认边距8像素) |
| {.no-title} | 去除组件名称 |
| {.sidebar} | 以左侧边栏显示 |
| {.storyboard} | 添加故事板(也可以在yaml中配置 storyboard: true) |
| {.tabset} | 以选项卡方式显示子页面 |
| {.tabset-fade} | 添加带有渐变效果的选项卡 |
| {data-padding=10} | 数据填充边距设置 （默认边距10像素） |
| {data-height=650} | 设置组件的相对高度 |
| {data-width=350} | 设置组件的相对宽度 |
| {data-icon="fa-list"} | 增加字体或者图标作为菜单栏标志 |
| {data-orientation=rows} | 设置页面布局方向 |
| {data-navmenu="Menu A"} | 菜单栏设定 |
| {data-commentary-width=400} | 故事板组件的相对宽度 |
Yaml全局配置
例子：
---
title: "FinanceR"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: scroll
---| 配置项 | 描述 |
|---|---|
| css | css文件路径 添加CSS皮肤 |
| favicon | 图标路径 添加favicon图标 |
| logo | 图片路径 导航栏左侧图标 |
| navbar | 形如 - {title: "A", href: "URL", align: left} 添加菜单栏 |
| orientation | 以 rows 或 columns 为布局方向 |
| social | ["facebook", "FinanceR", "github","linkedin", "weibo", 或者 "menu"] 连接到社交网站 |
| source_code | 是否显示源码 |
| storyboard | (true / false) 是否添加故事版 |
| theme | 默认皮肤:default 也可以选择：cosmo,bootstrap,cerulean,journal,flatly,readable,spacelab,united,lumen,paper,sandstone,simplex,yeti |
| vertical_layout | 是否使用自适应风格，自动填补或滚动元素大小 |
故事板：面向VC
利用故事版，可以循序渐进地讲解某个业务场景的生命周期。
下面是一个storyboard 在移动端和PC端的显示效果：
### 菜单栏名称 {.storyboard}
\```{r}
library(d3heatmap)
d3heatmap(mtcars, scale="column",
colors="Blues")
\```点石成金
首先，静态图例可以通过 htmlwiget 的valueBox等函数快速制图
### Downloads per sec (last 5 min)
\```{r}
htmlwiget::valueBox(
value = rate,
icon = "fa-area-chart",
color = if (rate >= 3) "warning" else "primary"
)
\```然后，在yaml中声明 runtime: shiny 就可以开启动态图表模式，当然相应的图表应该在后面追加上 renderValueBox() 函数：
htmlwiget::valueBox(
value = rate,
icon = "fa-area-chart",
color = if (rate >= 3) "warning" else "primary"
) %>% renderValueBox()这样ValueBox就变成可以实时现实数据的仪表了（通过R驱动）。
总结
flexdashboard 意在快速制作dashboard，它制作dashboard的速度比shinydashboard还要来得快，然而flexdashboard框架的设计理念是运用在一些足够快速但是富有约束的场景，在产品变得复杂的情况下，整个源码又可以切换到 shinydashboard 之中来满足工程化的需求。可以说flexdashboard是在Rmarkdown、shiny、htmlwegit之上结出的果实。
在使用flexdashboard的过程中，目前，调整一些局部的细节变得相对困难，这里比较怀念zeppelin中可以通过直接选择column的宽度来调整排版（基于boostrap），有些地方图表和显示并不一定能满足最终客户的需求，不过我相信在和用户讨论需求的环节中，flexdashboard肯定会成为你趁手的武器。
目前，zeppelin中尚且不能完美支持DT::datatable、plotly::ggplotly等等方式的作图，也不支持shiny，相信在未来的不久zeppelin应该会和flexdashboard相互融合。
小技巧：
flexdashboard允许在多个 block 中并行运行多个shiny server实例，这意味着我们的代码复用更为方便。