简体   繁体   English

ioslides中闪亮的应用程序大小

[英]Shiny app size in ioslides

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. 我在这里使用ScatterD3制作了一个基本的闪亮应用程序,但是当我尝试将其嵌入到ioslides演示文稿中时,它会被截断并出现滚动条。 The slide could easily accommodate the entire app (I've measured the size), but ioslides or shiny is choosing to section it. 幻灯片可以轻松容纳整个应用程序(我已经测量了大小),但是ioslidesshiny的选择将其切片。 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. 我需要该图显示此大小,因为在我的真实项目中,图例中有一个很长的列表,要求高度大约为720px。 在此处输入图片说明 Here's the code: 这是代码:

EDIT Using Joris' suggestions and removing the unnecessary wellPanel, I've reset the height to 550, which is demonstrably small enough within the scope of the slide. 编辑 根据Joris的建议并删除不必要的wellPanel,我将高度重置为550,这在幻灯片的范围内显然足够小。 I'm still getting this scrollbar, and feel like there must be a way to adjust the height of what is rendered. 我仍在使用此滚动条,感觉必须要有一种方法来调整渲染的高度。 Essentially, I want to use the whole slide and fill it with this app. 本质上,我想使用整个幻灯片并用此应用程序填充它。

```{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)
```

I've tried adding options = list(height = 1080) to the shinyApp call. 我尝试将options = list(height = 1080)到ShinyApp调用中。 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. 我还看了这篇文章 ,并设置了<div style="margin-left:-65px; margin-top:-70px; width:112%; height:130%;">启用了我想要的许多功能,但是它仍然拒绝调整height参数,这对我来说最重要。 I tried adding custom CSS to get the overflow to be visible, but none of these solutions seem to work. 我尝试添加自定义CSS以使溢出可见,但是这些解决方案似乎都不起作用。

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 . 您应该正确设置页面,以便控件实际上位于绘图旁边,并使用功能scatterD3Outputwidthheight参数。

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. 因此,高度为720px时,该图实际上不适合幻灯片。

Edit : Ioslides also allows you to work with a custom css file. 编辑 :Ioslides还允许您使用自定义的CSS文件。 The iframe is the actual frame within which the slide content is constructed. iframe是在其中构建幻灯片内容的实际框架。 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. 紧接着,您可以尝试使用幻灯片本身的大小以及水平和垂直位置。

Place the following in a file called eg temp.css in the same directory as your Rmd file: 放到一个文件名为例如以下temp.css在同一目录作为您的RMD文件:

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

iframe {
  height: 900px;
}

And add css: temp.css to your .Rmd file as shown below: 并将css: temp.css添加到您的.Rmd文件中,如下所示:

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

Gives : 给出: 在此处输入图片说明

You can play around with these in order to get a better fitting. 您可以尝试这些,以更好地适应。

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. 如果只使用一个简单的图进行更新,则可以将UI和服务器端放在各自的R块中,并使用outputArgs来操纵所有输出函数。 This doesn't work with the scatterD3 package, but it's a good thing to know anyway. 这不适用于scatterD3软件包,但是无论如何要知道这是一件好事。

---
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"))

```

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM