r - 如何在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 来调整其外观。请注意，您可以使用 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 中的数据填充选项:

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

现在，它看起来像这样: