动态调整 Shiny 中的绘图大小答案

【问题标题】：Resize plot in Shiny dynamically动态调整 Shiny 中的绘图大小
【发布时间】：2018-07-30 14:05:55
【问题描述】：

问题

我使用下面的代码通过 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)

【问题讨论】：

我找到了使用$(window).trigger('resize') 的解决方案。这种方法有什么我可能会忽略的吗？
你可能会放心。我一般先在plotOutput()函数中尝试width = "100%"，让CSS调整宽度。如果这不起作用，触发调整大小可能是要走的路。
谢谢，用width=100%试过了，但没用，所以我还是用trigger吧。

标签： r shiny shinydashboard

【解决方案1】：

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

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

【讨论】：