时间戳

首页 > 解决方案 > 动态调整 Shiny 中的绘图大小

r - 动态调整 Shiny 中的绘图大小

问题描述

问题

shinydashboard::box我使用下面的代码通过 javascript动态更改 a 的大小。原则上这可以正常工作，但是plotOutput框内的图像在大小方面无法正确重新渲染。也就是说，无论周围的大小如何，绘图宽度都保持不变box。有趣的是，当我Inspect在 Chrome 中使用查看源代码时，图表突然被调整大小。

截屏

在此处输入图像描述

问题

我需要如何调整我的代码以调整input$cols更改的绘图大小？值得一提的是，在我的真实代码中，盒子的内容是通过模块动态呈现的。因此，我对renderPlot函数本身几乎没有控制权。当我“检查”它时图像会立即调整大小，我希望有一个我可以调用的 javascript 函数，它可以为我完成这项工作。

代码

library(shiny)
library(shinydashboard)
library(shinyjs)
library(glue)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(selectInput("cols", NULL, c(2, 3, 4, 6, 12), 4)),
  dashboardBody(
    useShinyjs(),
    div(
      box(solidHeader = TRUE,
          title = "Box",
          width = 4,
          status = "info",
          sliderInput("sld", "n:", 1, 100, 50),
          plotOutput("plt")
      ), id = "box-parent")
  )) 

server <- function(input, output) {
  observe({
    cols <- req(input$cols)
    runjs(code = glue('var $el = $("#box-parent > :first");',
                      '$el.removeClass(function (index, className) {{',
                      'return (className.match(/(^|\\s)col-sm-\\d+/g) || []).join(" ")',
                      '}});',
                      '$el.addClass("col-sm-{cols}");'))
  })

  output$plt <- renderPlot(plot(rnorm(input$sld), rnorm(input$sld)))
}

shinyApp(ui, server)

标签： rshinyshinydashboard

解决方案

对于遇到此问题的人，这是一个解决方案。问题源于Shiny不知道某些内容已调整大小的事实，因为一切都是在 javascript 级别上完成的，而没有让Shiny我们知道我们确实调整了元素的大小。为此，您必须通过 显式调用window.resize句柄$(window).trigger('resize')。

这解释了行为的方式，为什么一旦你Inspect使用元素，情节就会正确调整大小，因为在这种情况下，resize事件也会被触发，并且在这个例程中Shiny显然会重新缩放情节。

推荐阅读