ioslides中闪亮的应用程序大小 [英] Shiny app size in ioslides

问题描述

我在这里使用ScatterD3制作了一个基本的闪亮应用程序，但是当我尝试将其嵌入到ioslides演示文稿中时，它会被截断并出现滚动条.幻灯片可以轻松容纳整个应用程序(我已经测量了大小)，但是ioslides或shiny正在选择对其进行剖切.我需要该图显示此大小，因为在我的真实项目中，图例中有一个很长的列表，要求高度大约为720px. 这是代码:

I've made a basic shiny app using ScatterD3 here, but when I try to embed it in an ioslides presentation it gets cut off and a scrollbar appears. The slide could easily accommodate the entire app (I've measured the size), but ioslides or shiny is choosing to section it. I need the plot to appear this size because in my real project I have a very long list in the legend that requires height around 720px. Here's the code:

编辑 使用Joris的建议并删除不必要的wellPanel，我将高度重置为550，在幻灯片范围内，该高度足够小.我仍在使用此滚动条，感觉必须要有一种方法来调整渲染内容的高度.本质上，我想使用整个幻灯片并用此应用程序填充它.

```{r, echo=FALSE}
library(scatterD3)

ui <- fluidPage(
           scatterD3Output("distPlot", height = "550px")
           )

server <- function(input, output) {
  output$distPlot <- renderScatterD3({
    mtcars$names <- rownames(mtcars)
    scatterD3(data = mtcars, x = wt, y = mpg, lab = names,
              col_var = cyl, symbol_var = am,
              xlab = "Weight", ylab = "Mpg", col_lab = "Cylinders",
              symbol_lab = "Manual transmission")
  })
}
shinyApp(ui = ui, server = server)
```

我尝试将options = list(height = 1080)添加到ShinyApp调用中.我还查看了这篇文章，并设置<div style="margin-left:-65px; margin-top:-70px; width:112%; height:130%;">可以启用我想要的许多功能，但是它仍然拒绝调整height参数，这对我来说是最重要的.我尝试添加自定义CSS以使溢出可见，但这些解决方案似乎都不起作用.

I've tried adding options = list(height = 1080) to the shinyApp call. I also looked at this post, and setting a <div style="margin-left:-65px; margin-top:-70px; width:112%; height:130%;"> enables much of the functionality I want, but it still refuses to adjust the height parameter, which is the most important to me. I tried adding custom CSS to get the overflow to be visible, but none of these solutions seem to work.

推荐答案

您应该正确设置页面，以便控件实际上位于图的旁边，并使用函数scatterD3Output的width和height自变量>.

You should set up your page correctly so the controls actually come next to the plot, and use the width and height arguments of the function scatterD3Output.

请记住，虽然幻灯片看起来可能足够大，但是您仍需要为标题保留一些空间.因此，高度为720px时，该图实际上不适合幻灯片.

Keep in mind though that the slide might look large enough, but you still need to reserve some space for the title. So with 720px height, the plot doesn't fit on the slide actually.

编辑:Ioslides还允许您使用自定义的CSS文件. iframe是在其中构建幻灯片内容的实际框架.操纵它可以给您更多的空间.紧接着，您可以播放幻灯片本身的大小以及水平和垂直位置.

Edit: Ioslides also allows you to work with a custom css file. The iframe is the actual frame within which the slide content is constructed. Manipulating that one gives you a bit more space. Next to that, you can play around with the size of the slides itself and the horizontal and vertical position.

将以下内容放在与Rmd文件位于同一目录中的名为temp.css的文件中:

Place the following in a file called eg temp.css in the same directory as your Rmd file:

slides > slide {
  width: 1000px;
  height: 800px;
  padding: 10px 20px;
  left: 46%;
  top: 45%;
}

iframe {
  height: 900px;
}

并在您的.Rmd文件中添加css: temp.css，如下所示:

And add css: temp.css to your .Rmd file as shown below:

---
runtime: shiny
output: 
  ioslides_presentation:
    css: temp.css
---

##


```{r, echo=FALSE}
library(scatterD3)

ui <- fluidPage(
  fluidRow(
    column(4,
           wellPanel(
             selectInput("Living", "Choose Life", 
                         choices = c("Life", "Death"))
           )
    ),
    column(8,
           scatterD3Output("distPlot", height = "550px"))
  )
)

server <- function(input, output) {
  output$distPlot <- renderScatterD3({
    mtcars$names <- rownames(mtcars)
    scatterD3(data = mtcars, x = wt, y = mpg, lab = names,
              col_var = cyl, symbol_var = am,
              xlab = "Weight", ylab = "Mpg", col_lab = "Cylinders",
              symbol_lab = "Manual transmission")
  })
}
shinyApp(ui = ui, server = server)
```

礼物:

您可以尝试使用这些工具，以获得更好的拟合效果.

You can play around with these in order to get a better fitting.

在旁注中:在许多情况下，绝对不需要创建整个应用程序.如果只使用一个简单的图进行更新，则可以将UI和服务器端分别放在其自己的R块中，并使用outputArgs来操纵所有输出函数.这对于scatterD3软件包不起作用，但是无论如何要知道这是一件好事.

On a sidenote: in many cases there's absolutely no need to create an entire app. In case you would just use a simple plot to be updated, you can put the UI and the server side each in its own R chunk, and use outputArgs to manipulate all the output functions. This doesn't work with the scatterD3 package, but it's a good thing to know anyway.

---
runtime: shiny
output: ioslides_presentation
---

## John

```{r, echo=FALSE}
library(scatterD3)
```

```{r, echo = FALSE}
             selectInput("Living", "Choose Life", 
                         choices = c("Life", "Death"))
```



```{r echo = FALSE, width = "80%", height = "400px"}
renderPlot({
    mtcars$names <- rownames(mtcars)
    plot(mpg~wt, data = mtcars)
  }, outputArgs = list(width = "80%",height="400px"))

```

这篇关于ioslides中闪亮的应用程序大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！