如何在重标记文档中设置rpivotTable的大小

Question

我想在一个rpivotTable输出中包含几个HTML (文档、柔性版，以及其他导致独立HTML文件的选项都可以；我不能用它来显示)。如何为这个How小部件指定固定的宽度和/或高度？

我面临的问题是，rpivotTable text小部件似乎根据我的浏览器缩放而调整自身大小，并且经常重叠文档中的文本或随后的rpivotTable输出(请参阅屏幕快照)。每当我在rpivotTable中更改某些内容(例如，拖放一个新的行或列变量，或设置一个过滤器)时，情况就会变得更糟。

一些googling建议我需要了解html小部件和javascript调整大小，如果是这样的话，您可以向我指出这个htmlwidget的适当调整方法，还是在这里建议一个调整大小的函数？我意识到这很棘手，因为枢轴表应该调整大小，但让我们假设我知道正确的大小(例如1000 be宽，500 be高)，或者我永远不会更改需要调整大小的选项，并且将其硬编码到某些集合维度就可以了。

​

上述输出(foo.rmd)的代码：

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

```{r setup, include=FALSE}

图书馆(RpivotTable)

## Plot1

```{r}

rpivotTable(mtcar，row= 'mpg'，aggregatorName = 'Sum'，vals = 'cyl')

## Plot2

```{r}

rpivotTable(mtcars)

Answer 1

有很多种方法可以做到这一点。我在前三个选项中使用了flexdashboard。更新:第四，我使用了html_document。(更多关于“为什么”，当你到达那个选项时。

备选案文1

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

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

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

​

​

选项2

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

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

将此CSS元素设置为both表示宽度和高度。不过，您可以将其限制在其他可调整大小的限制上。

然而，用这种方法在右下角找到微小的阻力指示器是很痛苦的。

​

​

选项3

我发现在容器中添加一点阴影或大量阴影可以使调整大小的能力更好地突出，并使功能更加美观。

在下面的样式编码中，我有一组没有那么激进的阴影注释。然而，图像显示的是更具侵略性的(而不是注释掉的)版本。CSS注释是/*nested like this*/。

<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元素查询并启动其功能。

```{r griddliest, engine="js", include=FALSE, results="asis"}

["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(函数(){

(i=0；i< scrp.length；i++) {

script = document.createElement('script');

script.src = scrp[i];

script.type = "text/javascript";

document.head.appendChild(script);

}

ElementQueries.listen()；//听！

}，200)；//等一下！

在RMarkdown html_document格式中有一些是标准的东西，会影响这个JS包的有用性，所以必须用CSS修改这些元素。

• 其中第一个是容器大小。RMD将自动限制页面宽度，此max-width设置必须取消设置。
• rpivottable默认为使任何溢出和所有溢出可见。对象大小需要更改，如果元素需要超出水平边距，则需要滚动。

若要修复这两个控件，请在RMD中的任何位置输入以下代码。这不会进入代码块。此外，您不能在CSS中为resize使用rpivotTable。它将与CSS元素查询包发生冲突。

<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。

在接下来的部分中，我包含了几个用于rendererOptions的C3图；其中包括大小。对于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 >htmlwidget> lib > pivottable到名为d3_renderers.min.js的文件。
• 打开文件后，搜索width()/1.4。我把那个1.4改为2.3。
• 搜索height()/1.4。我把它改成了1.8

您可以看到我在这个gif中使用的大小：

​

​

您可以将其与其他样式和JS选项相结合，比如cookie以保存表设置。

Answer 2

rpivotTable确实有您可以使用的width和height参数。允许更多控制的下面是一个关于调整HTML小部件大小的链接。

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

图书馆(RpivotTable)

## Plot1

```{r}

rpivotTable(mtcar，row= 'mpg'，aggregatorName = 'Sum'，vals = 'cyl'，width=“600 mpg”，height=“800 mpg”)

## Plot2

```{r}

rpivotTable(mtcars)

​

​