对于一个新项目,我想尝试新的 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}
```
(当然)这行不通,但我还没有找到正确的方法。有人有想法吗?
最佳答案
使用基本的行和列似乎不可能实现这一点,但可以通过使用侧边栏来保存左侧面板的内容来实现。与其他面板相比,这将改变左侧面板的格式,但可以通过编辑 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}
```
这给出了...
然后可以根据您的喜好编辑侧边栏的外观。例如:
至
- 将侧面板的背景颜色更改为白色(如果您希望它与其他面板匹配),
- 将顶部边缘与其他面板对齐,并且
- 添加左侧和底部边框以匹配其他面板:
将 .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}
现在,它看起来像这样:
关于r - 如何在flexdashboard中组合行和列布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36451484/