如何在flexdashboard中合并行和列的布局? [英] How to combine row and column layout in flexdashboard?

问题描述

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

For a new project I want to try the new flexdasboard package. I am thinking of a lay out in which the column and row orientation is somehow combined.

我正在考虑的布局是这样的:

The layout I am thinking of is something like this:

如果我更改此代码:

---
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}
```

(当然)，这行不通，但是我还没有弄清楚正确的方法.有人有主意吗?

(ofcourse) this doesn't work, but I haven't figured out the right way. Does anyone have an idea?

推荐答案

使用基本的行和列似乎无法做到这一点，但是可以通过使用侧边栏保留左侧面板的内容来实现.与其他面板相比，这将改变左侧面板的格式，但是您可以通过编辑css调整其外观.请注意，您可以使用data-width选项更改侧栏的宽度，例如{.sidebar data-width = 300}

This does not seem possible using basic rows and columns, but can be achieved by using a sidebar to hold the content of the left hand panel. This will change the formatting of the left panel compared to the others, but its appearance can then be adusted to your liking by editing the css. Note that you can alter the width of the side bar using the data-width option e.g. {.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}
```

哪个给了...

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

The appearance of the side bar can then be edited to your liking. For example:

收件人

1. 将侧面板的背景颜色更改为白色(如果您希望使其与其他面板匹配)，
2. 将顶部边缘与其他面板对齐，并且
3. 在左侧和底部添加边框以匹配其他面板:

将.section.sidebar的css样式表修改为

edit the css style sheet for .section.sidebar to

.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选项:

To change the padding, use the data-padding option in flexdashboard markdown:

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

现在，它看起来像这样:

Now, it looks like this:

这篇关于如何在flexdashboard中合并行和列的布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！