如何在R Shiny中通过JS将交互式绘图嵌入gridstack动态面板？

核心思路 #

直接通过JS硬写面板内容无法关联Shiny的动态输出系统，必须让Shiny接管绘图的渲染逻辑：动态生成唯一的输出ID，将Shiny输出容器嵌入Gridstack面板，再绑定对应的绘图渲染函数，这样既能保留R绘图的交互性，又能和Gridstack的布局兼容。

修改后的完整代码 #

library(shinydashboard)
library(shiny)
library(shinyjs)
library(gridstackeR)
library(plotly)

ui <- fluidPage (
  useShinyjs(),
  # 自定义CSS让绘图填满Gridstack面板
  tags$style(HTML('
    .grid-stack-item-content .shiny-plot-output {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 5px;
    }
  ')),
  tags$head(
    tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/10.0.1/gridstack-all.min.js", type='module'),
    tags$script(HTML('
      // 调整JS函数，支持传入输出ID，创建带Shiny容器的面板
      function addPlotWidget(outputId) {
        var grid = document.querySelector(\'.grid-stack\').gridstack;
        var widgetDiv = document.createElement(\'div\');
        widgetDiv.innerHTML = `<div id="${outputId}" class="shiny-plot-output"></div>`;
        grid.addWidget({h:5, w:2, content: widgetDiv});
      }
    '))
  ),
  grid_stack(id="mygrid"),
  actionButton("first_widget", "Add Plot Widget"),
  
  title = "Gridstack with Dynamic Plots"
)

server <- function(input, output, session) {
  # 用响应式变量计数，确保每个输出ID唯一
  plot_counter <- reactiveVal(0)
  
  observeEvent(input$first_widget, {
    plot_counter(plot_counter() + 1)
    current_plot_id <- paste0("dynamic_plot_", plot_counter())
    
    # 调用JS添加带输出容器的Gridstack面板
    runjs(sprintf("addPlotWidget('%s');", current_plot_id))
    
    # 动态渲染Plotly绘图（保留完整交互性）
    output[[current_plot_id]] <- renderPlotly({
      plot_ly(data = iris, x = ~Sepal.Length, y = ~Petal.Length, 
              type = "scatter", mode = "markers") %>%
        layout(margin = list(l=50, r=10, t=30, b=50))
    })
  })
}

shinyApp(ui = ui, server = server)

关键要点 #

• 唯一输出ID：用reactiveVal维护计数器，每次点击生成不重复的outputId，避免Shiny输出冲突。
• JS函数适配：修改addPlotWidget函数，接收输出ID参数，创建包含Shiny输出容器的面板，让Shiny能识别并渲染绘图。
• 样式调整：自定义CSS确保绘图填满Gridstack面板，避免出现留白或溢出。
• 保留交互性：通过Shiny原生的renderPlotly绑定输出，完全保留Plotly的缩放、悬停提示等交互功能。

改用ggplot2的方法 #

如果想用ggplot2生成绘图，只需要把渲染部分替换为：

output[[current_plot_id]] <- renderPlotly({
  # 用ggplot绘制基础图，再转成交互式Plotly图
  p <- ggplot(iris, aes(Sepal.Length, Petal.Length)) + 
    geom_point(color = "steelblue") +
    theme_minimal()
  ggplotly(p)
})

内容的提问来源于stack exchange，提问作者LinguiniThePasta