如何在rmarkdown文档中设置rpivotTable的大小

Question

我想在rmarkdown HTML输出中包含几个rpivotTable（文档，flexdashboard或其他生成独立HTML文件的选项都可以；不能使用Shiny）。我该如何指定此htmlwidget的固定宽度和/或高度？

我遇到的问题是，rpivotTable htmlwidget似乎会根据我的浏览器缩放而调整大小，并经常重叠文档中的文本或后续rpivotTable输出（请参见屏幕截图）。每次我更改rpivotTable中的某些内容（例如拖放新行或列变量或设置筛选器）时，情况都会变得更糟。

一些谷歌搜索表明我需要学习有关html小部件和javascript调整大小的知识，如果是这样的话，你能为我指出这个html小部件的正确调整大小方法吗？或者在这里建议一个调整大小函数？我意识到这很棘手，因为数据透视表应该可以自动调整大小，但让我们假设我知道正确的尺寸（例如宽1000像素，高500像素），或者我永远不会更改需要调整大小的选项，并且将其硬编码为某些固定的尺寸也可以。 上述输出的代码（foo.rmd）：

---
title: "test_rpt"
output: html_document
---

```{r setup, include=FALSE}
library(rpivotTable)
```

## Plot1

```{r}
rpivotTable(mtcars, rows = 'mpg', aggregatorName = 'Sum', vals = 'cyl')
```

## Plot2

```{r}
rpivotTable(mtcars)
```

- RyanStochastic

Answer 1

您可以使用多种方法来实现这一点。我使用了 flexdashboard 来实现前三个选项。更新：第四个选项我使用了 html_document。（关于“为什么”更多信息请参见第四个选项。）

选项 1

如果您只想隐藏溢出内容并使用滚动查看该内容，可以添加

<style>
.rpivotTable {
   overflow: auto;
}
</style>

这些样式元素可以放置在RMD的任何位置，只需确保它不在代码块内。我通常将其放在YAML之后或第一个代码块之后，在那里存储我的knitr选项和库调用。

选项2

另一种方法是添加能够调整大小表格所在空间的功能。

<style>
.rpivotTable {
   overflow: auto;
   resize: both;
}
</style>

将此CSS元素设置为both表示宽度和高度。您可以将其限制为其他可调整大小的限制。但是使用此方法在右下角找到小的拖动指示器很困难。

选项三

我发现在容器上添加一点阴影或很多阴影可以使调整大小的能力更加突出，使功能更具美感。

在以下样式编码中，我注释掉了一个不那么激进的阴影设置。然而，图像显示了更激进的（未被注释掉的）版本。CSS注释使用/*嵌套在这里*/。

<style>
body {
  margin-right: 2%;
  margin-left: 2%;
}
.rpivotTable {
  overflow:auto;
  resize: both;
  box-shadow: 0 22px 70px 4px rgba(0,0,0,0.56);
  -moz-box-shadow: 0 22px 70px 4px rgba(0,0,0,0.56);
  -webkit-box-shadow: 0 22px 70px 4px rgba(0,0,0,0.56);
  /*-moz-box-shadow: 0px 10px 14px -7px #000000;    less aggressive version*/
  /*-webkit-box-shadow: 0px 10px 14px -7px #000000; less aggressive version*/
  /*box-shadow: 0px 10px 14px -7px #000000;         less aggressive version*/
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid white;
  padding: 5px;
  margin: 5px 20px 50px 5px;
}
</style>

---

---

更新

选项4

此选项将使其他元素在您的rpivottable上方和下方移动。不幸的是，仅在对象水平过大时才会添加滚动条。

这需要您在RMD中有一块JS。它可以放置在脚本的任何位置。如果您不知道，如果尝试在块内运行代码，它将不起作用；您必须knit以使代码生效。

此代码引入JS包CSS Element Queries并启动其功能。

```{r griddliest, engine="js", include=FALSE, results="asis"}
scrp = ["https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/1.2.3/ElementQueries.min.js",
        "https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/1.2.3/ResizeSensor.js"];

setTimeout(function(){
  for(i=0; i < scrp.length; i++) {
    script = document.createElement('script');
    script.src = scrp[i];
    script.type = "text/javascript";
    document.head.appendChild(script);
  }
  
  ElementQueries.listen(); // just listen!!
  
}, 200); //wait a sec!

```

在RMarkdown的html_document格式中有一些标准元素会影响这个JS包的使用效果，因此必须用CSS进行修改以使内容更加通俗易懂。

• 其中之一是容器大小。RMD会自动限制页面宽度，需要取消max-width设置。
• rpivottable默认将任何溢出内容全部显示。对象大小需要更改，并且当元素需要超出水平边界时，需要将溢出内容滚动。

要解决这两个控件问题，请在RMD中的任何位置输入以下代码。这不属于代码块。此外，您不能在rpivotTable的CSS中使用resize，否则会与CSS Element Queries包发生冲突。

<style>
main-container {
   max-width: unset;
}
.rpivotTable {
   overflow: auto; /*do not use `resize`*/
}
</style>

我觉得提供控制小部件和图形大小的方法非常重要，否则这个包的好处可能会丧失。

这里展示了两种方法：第一种使用JS包。第二种使尺寸静态化，无论使用其他选项，它都不会改变大小。

# method 1, this is malleable controls that works with js
rpivotTable(mtcars, rows = "mpg", cols=c("cyl"), width = "90%", height = "40%")

# method 2; this is strict control; overrides the js!
rp <- rpivotTable(mtcars, rows = "mpg", cols=c("cyl"))
rp$sizingPolicy$defaultWidth = "90%"
rp$sizingPolicy$defaultHeight = "40%"

目前在rpivotTable包中的图表，除了树状图以外，其余都是C3图表。树状图是D3。

在下一个代码块中，我包含了几个C3图表的rendererOptions选项；其中之一是大小。对于C3，您不能使用动态大小(即%，em，vh等)。非动态大小要求是C3.js的一部分，而不是R或rpivotTable。

rp <- rpivotTable(mtcars, rows = "mpg", cols = c("cyl"), 
                  width = "90%", height = "40%", 
                  rendererOptions = list(
                    c3 = list(legend = list(show = FALSE), # hide legend
                              data = list(labels = TRUE), # show labels
                              size = list(width = "600",  # control size
                                          height = "500"),
                              options = list(responsive = TRUE,
                                             maintainAspectRatio = FALSE))))

如果您正在使用cran软件包，则还需要添加此行：

rp$x$params$rendererOptions <- rp$x$params$rendererOptions[[0]]

我已经在他们的软件包中修复了这个问题；您可以使用该软件包的那个版本：

devtools::install_github("fraupflaume/rpivotTable")

最后但并非最不重要的是，控制D3树状图的大小。这并不是一件简单的事情。我认为此渲染器的代码并没有寻找预设选项。（D3.js告诉你使用样式，但一旦它作为小部件的一部分就不起作用了。）

我修改的方式是通过修改我的计算机上的R软件包。如果您想更改树状图的呈现尺寸：

• 确定您的库文件夹的位置；您可以在R中使用.Library获取目录。
• 进入目录后，通过文件夹> rpivottable > htmlwidgets > lib > pivottable导航到名为d3_renderers.min.js的文件。
• 打开文件后，搜索width () / 1.4。我将1.4更改为2.3。
• 搜索height() / 1.4。我将其更改为1.8

您可以在此gif中查看我使用的尺寸：

您可以将此与其他样式和JS选项结合使用，例如cookie来保存表格设置。

- Kat

---

谢谢@Kat。有没有一种方法（不需要滚动条），当表格的垂直尺寸增加时，页面元素在表格下方“向下移动”（就像底部边距增加了一样），反之亦然？我以为这个resize: both;可以实现，但是不行。 - gd047

我最初想做那件事。我尝试了几种方法来触发事件，当高度超过容器高度时，但无论使用什么机制进行调整大小，都会使我的事件失效。不过我喜欢挑战...所以我会继续寻找。 - Kat

我忘了提到，如果您使用选项4，即CSS Element Queries JS包，与flex_dashboard一起使用，则无法使用默认参数vertical_layout: fill，这会使网页无法滚动。您可以使用storyboard或vertical_layout: scroll，这两个选项允许滚动。 - Kat

Answer 2

rpivotTable有width和height参数可供使用。 这里是关于调整Rmarkdown中HTML小部件大小的链接，可以实现更多的控制。

---
title: "test_rpt"
output: html_document
---
```{r setup, include=FALSE}
library(rpivotTable)
```

## Plot1

```{r}
rpivotTable(mtcars, rows = 'mpg', aggregatorName = 'Sum', vals = 'cyl', width="600px",     height="800px")
```

## Plot2

```{r}
rpivotTable(mtcars)
```

- Daniel_j_iii

---

嘿，谢谢！这确实有帮助，至少让我在创建文档时第一个图表不会溢出第二个。有没有想法如何在调整大小后防止rpivotTable溢出文档中的其他内容？例如，如果我缩小浏览器并更改rpivotTable中的某些内容，则它会扩展以填充我的浏览器窗口；如果我放大浏览器并更改某些内容，则它会缩小以填充我的浏览器窗口。有可能关闭这种行为吗？ - RyanStochastic