如何在flexdashboard中组合行和列布局？

Question

对于一个新项目,我想尝试新的flexdasboard包.我正在考虑一种布局,其中列和行方向以某种方式组合.

我想的布局是这样的:

如果我更改此代码:

---
title: "Focal Chart (Left)"
output: flexdashboard::flex_dashboard
---

Column {data-width=600}
-------------------------------------

### Chart 1

```{r}
```

Column {data-width=400}
-------------------------------------

### Chart 2

```{r}
```   

### Chart 3

```{r}
```

进入这个:

---
title: "Focal Chart (Left)"
output: flexdashboard::flex_dashboard
---

Column {data-width=600}
-------------------------------------

### Chart 1

```{r}
```

Column {data-width=400}
-------------------------------------

Row {data-width=400}
-------------------------------------

### Chart 2

```{r}
```   

### Chart 3

```{r}
```   

Row {data-width=400}
-------------------------------------

### Chart 4

```{r}
```

(当然)这不起作用,但我还没有找到正确的方法.有没有人有想法？

Answer 1

使用基本行和列似乎不太可能,但可以通过使用侧边栏来保存左侧面板的内容来实现.这将改变左侧面板与其他面板相比的格式,但通过编辑css可以根据自己的喜好调整其外观.请注意,您可以使用数据宽度选项更改侧栏的宽度,例如{.sidebar data-width = 300}

---
title: "Focal Chart"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
---

Column {.sidebar data-width=500}
-------------------------------------
### Chart 1
```{r}
```

Row {data-height=350}
-------------------------------------
### Chart 2
```{r}
```

### Chart 3
```{r}
```   

Row {data-height=650}
-------------------------------------
### Chart 4
```{r}
```

这使...

然后可以根据自己的喜好编辑侧栏的外观.例如:

至

1. 将侧面板的背景颜色更改为白色(如果您希望它与其他面板匹配),
2. 将顶边与其他面板对齐,然后
3. 添加左边和下边框以匹配其他面板:

编辑.section.sidebar的css样式表

.section.sidebar {
  top: 61px;
  border-bottom: 10px solid #ececec;
  border-left: 10px solid #ececec;
  background-color: rgba(255, 255, 255, 1);
}

要更改填充,请使用flexdashboard markdown中的data-padding选项:

Column {.sidebar data-width=500 data-padding=10}

现在,它看起来像这样:

Answer 2

我根据在 RStudio 的 Shiny+flex 站点中找到的内容编写了这个 flexdashboard 示例fillCol：

\n\n

\n\n

---\ntitle: "Fill Layout"\noutput: \n  flexdashboard::flex_dashboard:\n    orientation: columns\nruntime: shiny\n---\n\n# Info {.sidebar data-width=350}\n\nWhen you mix multiple Shiny inputs and/or outputs within a flexdashboard panel it\xe2\x80\x99s good practice to have them fill the bounds of their container in the same way that other flexdashboard components like plots and htmlwidgets do. This is possible using the Shiny `fillRow` and `fillCol` layout functions.\n\nFor those familiar with Shiny here are further details on how this example works:\n\n1. The container is laid out using the `fillCol` function, which establishes a single column layout with flexible row heights.\n\n2. Flexible height behavior is defined via `flex = c(NA, 1)`. The `NA` applies to the first component (the input panel) and says to not give it flexible height (i.e. allow it to occupy it\xe2\x80\x99s natural height). The `1` applies to the second component (the plot) and says that it should have flexible height (i.e. occupy all remaining height in the container).\n\n3. The call to `plotOutput` includes `height = "100%"` to ensure that the plot takes advantage of the height allocated to it by the `fillCol` flexible layout.\n\n4. Finally, note that unlike the simpler layout examples above this examples uses an explicit  `plotOutput` / `renderPlot` pairing rather than just a standalone `renderPlot`. This is so that the plot can be included in a more sophisticated layout scheme (i.e. one more like traditional ui.R layout).\n\n# Use fillCol\n\n```{r}\nfillCol(height = 600, flex = c(NA, 1), \n  inputPanel(\n    selectInput("region", "Region:", choices = colnames(WorldPhones))\n  ),\n  plotOutput("phonePlot", height = "100%")\n)\n\noutput$phonePlot <- renderPlot({\n  barplot(WorldPhones[,input$region]*1000, \n          ylab = "Number of Telephones", xlab = "Year")\n})\n```\n

\n

Answer 3

您真正需要的是fillCol和fillRow功能。看看这个：http : //shiny.rstudio.com/articles/gadget-ui.html#fillrowfillcol