如何在 Rmarkdown HTML 中并排显示 2 个 flexdashboard 仪表？答案

【问题标题】：How to display 2 flexdashboard gauges side by side in Rmarkdown HTML?如何在 Rmarkdown HTML 中并排显示 2 个 flexdashboard 仪表？
【发布时间】：2016-10-24 19:37:58
【问题描述】：

我有两个 flexdashboard 仪表，我想在 Rmarkdown -> html 文件中并排绘制它们。该文件不应该是一个 flexdashboard，只是尝试使用该包中的漂亮仪表。

---
title: "Eye Gaugeing"
author: "Databot"
date: "10/24/2016"
output: html_document
fig_caption: yes
---

```{r setup, include=FALSE}
library(flexdashboard)
gauge1_data <- 95
gauge2_data <- 63
max_data <- 100
```

## Gauges
```{r gauge, fig.width=2, fig.height=2, fig.cap='Cap1'}
gauge(round(100*(1.0*gauge1_data)/max_data,2),0,100, symbol = '%', label= "Non-Stops: Tile 1", gaugeSectors(
  success = c(80, 100), warning = c(40, 79), danger = c(0, 39)))
```
```{r gauge2, fig.width=2, fig.height=2, fig.cap='Cap1'}
p0 <- gauge(round(100*(1.0*gauge2_data)/max_data,2),0,100, symbol = '%', label= "Full Cabin Match: Tile 1", gaugeSectors(
  success = c(80, 100), warning = c(40, 79), danger = c(0, 39)))
```

^{我喜欢大仪表，我不能说谎。}

令人惊讶的是，我很难将它们并排放置。尝试使用library(gridExtra)，但它只喜欢安排名为grobs 的东西。仪表是 htmlwidget 和 gauge 类。

还尝试了{r out.width=c('500px', '300px'), fig.show='hold'} 并将它们都塞进同一个块中，但出现了错误。

如果有任何建议，我将不胜感激。

【问题讨论】：

@JasonAizkalns，请注意上面的output: html_document。我发现 flexdashboard 的输出太混乱了。预期的输出不是（flex）仪表板，只是尝试使用该包的 gauge() 功能。

标签： r r-markdown flexdashboard

【解决方案1】：

flexdashboard 中的仪表专门用于 flexdashboard 布局系统，在其他格式中通常不会按预期工作（这就是为什么小部件是 flexdashboard 的一部分，而不是在独立包中的原因）。

【讨论】：

【解决方案2】：

您可以通过使用HTML/Bootstrap framework 创建两列来使仪表并排：

## Gauges

<div class = "row">
<div class = "col-md-6">
<center>
```{r gauge, fig.width=2, fig.height=2}
gauge(round(100*(1.0*gauge1_data)/max_data,2),0,100, symbol = '%', label= "Non-Stops: Tile 1", gaugeSectors(
  success = c(80, 100), warning = c(40, 79), danger = c(0, 39)))
```
</center>
</div>

<div class = "col-md-6">
<center>    
```{r gauge2, fig.width=2, fig.height=2}
gauge(round(100*(1.0*gauge2_data)/max_data,2),0,100, symbol = '%', label= "Full Cabin Match: Tile 1", gaugeSectors(
  success = c(80, 100), warning = c(40, 79), danger = c(0, 39)))
```    
</center>
</div>
</div>

【讨论】：