动态调整Shiny中的绘图大小

Question

问题

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

屏幕截图

问题

如何更改我的代码以根据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)

Answer 1

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

这以行为的方式解释了为什么Inspect元素一旦被resize事件触发并且在此例程{{1 }}显然可以重新缩放图。