在flexdashboard中自动调整ggplot2图表大小

Question

我有一个Flexdashboard只有一个框架。现在我遇到了两个问题：

第一个，如何改变框架标题（"Example"）的大小？

第二个，仪表板在浏览器中自动调整大小。但是，ggplot2图表没有自动调整。如何告诉flexdashboard自动调整此图表的大小？

---
title: "Resize ggplot2 Plots in FlexDashboard"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
    theme: lumen
    social: menu
    source: embed
---

```{r setup, include=FALSE}
require(flexdashboard)
require(ggplot2)
df <- data.frame(year = c("2013", "2014", "2015", "2013", "2014", "2015", "2013", "2014", "2015"),
                 cat = c("A", "A", "A", "B", "B", "B", "C", "C", "C"),
                 freqA = c(100, 100, 110, 80, 80, 90, 90, 90, 100),
                 freqB = c(50, 50, 55, 40, 40, 45, 45, 45, 50))
```

### Example

```{r}
ggplot(df, aes(x = year, weight = freqA)) +
        geom_bar(position="dodge", alpha = .2, width=.5) + 
        # add and overlay elements
        geom_bar(aes(x = year, weight = freqB, fill = cat),
                 position = "dodge", width=.5) +
        scale_fill_manual(values = c("#6baed6", "#fb6a4a", "#238b45")) +
        # add hlines for waffle-design
        geom_hline(yintercept=seq(0, 120, by = 10), col = 'white') +
        # facet display - 1 row, 3 columns
        facet_grid(. ~ cat) +
        # delete labels of x- and y-axis
        xlab("") + ylab("") +
        # blank background and now grids and legend
        theme(panel.grid.major.x = element_blank(), panel.grid.major.y = element_blank(),
              panel.grid.minor.y = element_blank(),
              panel.background = element_blank(), legend.position = "none",
              axis.text.x = element_text(angle = 0, hjust = 0.5))
```


***

Problem:

- How can I tell flex dashboard to automatically resize the ggplot2 Plot?

- The plot should fill the whole space!

- feder80

---

使用plotly包中的ggplotly()将图形包装起来，可以自动调整图形大小以适应所给定的空间。虽然这并不是必需的，但它确实很有用。这是我经常使用的方法，而且效果非常好。生成的图形总是最佳大小。 - Monduiz

我在我的flexdashboard中使用了一个闪亮的应用程序。这对我解决了问题。 - Developer

Answer 1

feder80，我刚开始使用'flexdashboard'，但是如何使用列而不是故事板布局呢？您可以设置列的大小，它似乎对大小更具响应性（但它不会将图表拉伸到每个角落）。

请参见：

- 列的宽度或设置深度：http://rmarkdown.rstudio.com/flexdashboard/using.html#sizing - 其他布局：http://rmarkdown.rstudio.com/flexdashboard/using.html#orientation 这些页面指出："默认情况下，仪表板中的二级markdown标题（------------------）定义列，在每个列内垂直堆叠各个图表。"

请注意，如果您在较小的屏幕上查看此内容，则有特殊的移动布局默认值限制大小。 代码：

---
title: "Resize ggplot2 Plots in FlexDashboard v2"
output: 
  flexdashboard::flex_dashboard:
    theme: lumen
    social: menu
    source: embed
---

```{r setup, include=FALSE}
require(flexdashboard)
require(ggplot2)
df <- data.frame(year = c("2013", "2014", "2015", "2013", "2014", "2015", "2013", "2014", "2015"),
                 cat = c("A", "A", "A", "B", "B", "B", "C", "C", "C"),
                 freqA = c(100, 100, 110, 80, 80, 90, 90, 90, 100),
                 freqB = c(50, 50, 55, 40, 40, 45, 45, 45, 50))
```

Column1
-------

### Example


```{r}


  ggplot(df, aes(x = year, weight = freqA)) +
    geom_bar(position="dodge", alpha = .2, width=.5) + 
    # add and overlay elements
    geom_bar(aes(x = year, weight = freqB, fill = cat),
             position = "dodge", width=.5) +
    scale_fill_manual(values = c("#6baed6", "#fb6a4a", "#238b45")) +
    # add hlines for waffle-design
    geom_hline(yintercept=seq(0, 120, by = 10), col = 'white') +
    # facet display - 1 row, 3 columns
    facet_grid(. ~ cat) +
    # delete labels of x- and y-axis
    xlab("") + ylab("") +
    # blank background and now grids and legend
    theme(panel.grid.major.x = element_blank(), panel.grid.major.y = element_blank(),
          panel.grid.minor.y = element_blank(),
          panel.background = element_blank(), legend.position = "none",
          axis.text.x = element_text(angle = 0, hjust = 0.5))

```


Column2{data-width=200}
-------

Problem:

- How can I tell flex dashboard to automatically resize the ggplot2 Plot?

- The plot should fill the whole space!

使用不同浏览器窗口大小的图片

虽然不太明显，但你可以从右侧的文字中看出它们的宽度是不同的像素。

- micstr

---

这个回答完全误解了问题的重点：故事板明显不是问题所在，手动强制 列 的宽度也无法解决 ggplot2 的问题，更不用说移动布局在这里是无关紧要的。 - gented

Answer 2

首先， 调整标题的大小。不幸的是，故事板布局在R代码的主要部分中可以指定的选项方面略显不太灵活。但是，您可以在markdown文档中使用css代码覆盖默认设置。我已经调整了此处提供的代码：修改R中的Flexdashboard CSS以适应您的问题（如下所示）。

其次， 调整图表的大小。在代码中使用fig.width = 12、fig.height= 5规格将允许您调整绘图的大小，并且当较小时会自动调整大小（尽管不总是完全适合框）。如果符合要求，plotly可能比ggplot2提供更多的图表大小调整选项。

  ---
title: "Resize ggplot2 Plots in FlexDashboard"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
    theme: lumen
    social: menu
    source: embed
---
Some commentary about Frame 1.

```{r setup, include=FALSE}
require(flexdashboard)
require(ggplot2)
df <- data.frame(year = c("2013", "2014", "2015", "2013", "2014", "2015", "2013", "2014", "2015"),
                 cat = c("A", "A", "A", "B", "B", "B", "C", "C", "C"),
                 freqA = c(100, 100, 110, 80, 80, 90, 90, 90, 100),
                 freqB = c(50, 50, 55, 40, 40, 45, 45, 45, 50))
```

### Example

```{r,fig.width = 12, fig.height= 5}

ggplot(df, aes(x = year, weight = freqA)) +
        geom_bar(position="dodge", alpha = .2, width=.5) + 
        # add and overlay elements
        geom_bar(aes(x = year, weight = freqB, fill = cat),
                 position = "dodge", width=.5) +
        scale_fill_manual(values = c("#6baed6", "#fb6a4a", "#238b45")) +
        # add hlines for waffle-design
        geom_hline(yintercept=seq(0, 120, by = 10), col = 'white') +
        # facet display - 1 row, 3 columns
        facet_grid(. ~ cat) +
        # delete labels of x- and y-axis
        xlab("") + ylab("") +
        # blank background and now grids and legend
        theme(panel.grid.major.x = element_blank(), panel.grid.major.y = element_blank(),
              panel.grid.minor.y = element_blank(),
              panel.background = element_blank(), legend.position = "none",
              axis.text.x = element_text(angle = 0, hjust = 0.5))
```


***

Problem:

- How can I tell flex dashboard to automatically resize the ggplot2 Plot?

- The plot should fill the whole space!


```{css css_formatting}
.storyboard-nav {
    box-sizing: border-box;
    width: 100% !important; /* This prevents JS transformation on width */
    height: auto; /* This overrides the height */
}

.storyboard-nav .sbnext, .storyboard-nav .sbprev {
    height: auto; /* This overrides the height */
    font-size: 3rem; 
}

.storyboard-nav .sbframelist {
    height: auto; /* This overrides the height */
}

.storyboard-nav .sbframelist ul {
    box-sizing: border-box;
    width: 100% !important; /* This prevents JS transformation on width */
    height: auto; /* This overrides the height */
}

.storyboard-nav .sbframelist ul li {
    height: auto; /* This overrides the height */
    width: auto; /* This overrides the width */
    font-size: 6rem;/* This determines the size of the text in the box */
}


```

- R.Sav