快速切换标签时，Shiny Plotly Plot 卡住了

Question

我试图找到一种方法来避免在加载绘图之前在 Shiny 中切换选项卡时无需重新加载完整绘图的情况下调整大小问题。下面给出了重现该问题的最小示例，方法是从正态分布幅度时间中抽取样本，然后绘制直方图作为计算密集型图的占位符。

time_waste<- function(magnitude) {
  y<-0
  for(i in 1:magnitude) {
    y<- y + rnorm(1,0,1)
  }
  return(abs(y))
}

ui <- fluidPage(sidebarLayout(
    sidebarPanel(width = 3,
                              fluidRow(
                                column(
                                  4,
                                  numericInput(
                                    inputId = "magnitude",
                                    label = "magnitude",
                                    value = 1000000
                                      )))),
    mainPanel(width = 8,
              tabsetPanel(id = "tabset",
                          tabPanel("Plot1", plotlyOutput("p1", height = "700px")),
                          tabPanel("Plot2", plotlyOutput("p2", height = "700px"))))
  )
  )

server<- function(input, output, session) {

  y<- reactive({
    rep(time_waste(time_waste(input$magnitude)),3)
  })

  output$p1 <- renderPlotly({

  p<- plot_ly(
    x = c("giraffes", "orangutans", "monkeys"),
    y = y(),
    name = "SF Zoo",
    type = "bar"
  )
  })

  output$p2<-  renderPlotly({

    p<- plot_ly(
      x = c("giraffes", "orangutans", "monkeys"),
      y = y(),
      name = "SF Zoo",
      type = "bar"
    )

  return(p)
  })

}

app <- shinyApp(ui, server)
runApp(app)

卡住的情节看起来像链接的图像： Stuck Plot

如果以任何方式调整了绘图的大小（例如，通过调整其所在窗口的大小）并且固定的绘图宽度不会出现问题，则绘图会正确显示。

提前致以诚挚的问候和感谢。

Answer 1

对我来说，这看起来像是 Plotly 方面的一个错误。如果您不指定起始宽度，则绘图将为 100px 宽。将 div 的宽度更改为 100% 并没有太大作用。

您可以在每次单击 Tab 时包含一些 Javascript 来调整绘图的大小，或者只要闪亮正忙，您就可以停用所有 Tab 按钮。

使用resize 方法，每次点击Tab 时绘图都会重新绘制，并且在更改窗口大小后，它们会再次正常调整大小。我也尝试使用 Plotly 的redraw、relayout 方法，但没有成功。

所以，我更喜欢第二个选项，在应用程序繁忙时禁用选项卡，但这并不能真正回答你的问题，所以我注释掉了 JavaScript。

time_waste<- function(magnitude) {
  y<-0
  for(i in 1:magnitude) {
    y<- y + rnorm(1,0,1)
  }
  return(abs(y))
}


## Resize plot p1 at every Tab click. 
js <- HTML("
$(document).on('shiny:value', function() { 
$('#tabset li a').on('click',function() {
  Plotly.Plots.resize('p1');
});
});
"
)


## Deactivate all Buttons as long as shiny is busy
# js <- HTML('
# $(document).on("shiny:busy", function() {
#  var inputs = document.getElementsByTagName("a");
#  console.log(inputs);
#  for (var i = 0; i < inputs.length; i++) {
#  inputs[i].disabled = true;
#  }
# });
# 
# $(document).on("shiny:idle", function() {
#  var inputs = document.getElementsByTagName("a");
#  console.log(inputs);
#  for (var i = 0; i < inputs.length; i++) {
#  inputs[i].disabled = false;
#  }
# });'
# )


ui <- fluidPage(
  ## Include JavaScript to the HTML
  tags$head(tags$script(js)),
  sidebarLayout(
  sidebarPanel(width = 3,
               fluidRow(
                 column(4,
                   numericInput(
                     inputId = "magnitude",
                     label = "magnitude",
                     value = 1000000
                   )))),
  mainPanel(width = 8,
            tabsetPanel(id = "tabset",
                        tabPanel("Plot1", plotlyOutput("p1", height = "700px")),
                        tabPanel("Plot2", plotlyOutput("p2", height = "700px"))))
  )
)

server<- function(input, output, session) {
  y <- reactive({
    rep(time_waste(time_waste(input$magnitude)),3)
  })

  output$p1 <- renderPlotly({
    plot_ly(x = c("giraffes", "orangutans", "monkeys"),
      y = y(),name = "SF Zoo",type = "bar")
  })

  output$p2<-  renderPlotly({
    plot_ly(x = c("giraffes", "orangutans", "monkeys"),
      y = y(), name = "SF Zoo",type = "bar")
  })
}

shinyApp(ui, server)