有没有办法在 R 中创建 Plotly 图表的全屏弹出窗口？

Posted 2023-02-18

【中文标题】有没有办法在 R 中创建 Plotly 图表的全屏弹出窗口？

【英文标题】：Is there a way to create a full screen popup window of a Plotly chart in R?

【发布时间】：2021-11-01 15:43:12

【问题描述】：

我创建了一个闪亮的仪表板，其中有许多选项卡，每个选项卡都有一些并排设置的图表。因为它们是并排的，如果不放大浏览器以使图表填满页面，可能很难详细查看单个图表（即使如此，由于某种原因，放大时图表会上下波动）。

我在想肯定有办法在 Plotly 中创建一个按钮来创建一个可以全屏显示的图表弹出窗口？但是，我在 Google 上搜索并找不到与 plotly 相关的任何内容。

我确实找到了这个... Shiny: plot results in popup window

这种弹出窗口就足够了。但在此示例中，图表仅在弹出窗口本身上创建（并且是图像而不是交互式绘图）。在这种情况下，我想做的是在主页上镜像图表，但我知道你从 UI 的两个不同部分调用相同的输出在 Shiny 中不起作用。

有人对如何解决这个问题有任何想法吗？

【问题讨论】：

从弹出/modalBox 中的相同图形数据中渲染一个新的输出（不同的 ID）怎么样？

我同意 Julien 的观点。例如，一个带有新输出的大尺寸模态（例如 ggplot），您可以拥有两个图形，这取决于相同的反应函数来提供数据。

【参考方案1】：

无需使用模式或任何其他附加组件。 无需渲染两次。 我们可以完全从前端解决这个问题，不需要任何服务器处理。

以下是我们如何使用一些 CSS 和 js 技巧来做到这一点：

library(shiny)
library(plotly)
ui <- fluidPage(
    htmltools::htmlDependencies(icon("")),
    tags$style(
        '
        .plot-zoom 
            position: absolute;
            border: none;
            background-color: transparent;
            bottom: 0;
            right: 0;

        
        .full-screen 
            position: fixed;
            height: 98vh !important;
            width: 98vw !important;
            left: 0;
            top: 0;
            z-index: 9999;
            overflow: hidden;
        
        '
    ),
    div(
        class = "plotly-full-screen",
        column(6, plotlyOutput("p2")),
        column(6, plotlyOutput("p1")),
    ),
    tags$script(HTML(
        "
        function plotZoom(el)
            el = $(el);
            var parent = el.parent().parent();
            if(el.attr('data-full_screen') === 'false') 
                parent.addClass('full-screen').trigger('resize').fadeOut().fadeIn();
                el.attr('data-full_screen', 'true');
             else 
                parent.removeClass('full-screen').trigger('resize').fadeOut().fadeIn();
                el.attr('data-full_screen', 'false');
            
        
        
        $(function()
           $('.plotly-full-screen  .plotly.html-widget').append(
            `
            <div style='position: relative;'>
                <button onclick=plotZoom(this) class='plot-zoom' data-full_screen='false' title='Full screen'>
                    <i class='fa fa-expand-arrows-alt'></i>
                </button>
            </div>
            `); 
        )
        "
    ))
   
)

server <- function(input, output, session) 
    output$p1 <- output$p2 <- renderPlotly(plot_ly(data = iris, x = ~Sepal.Length, y = ~Petal.Length))


shinyApp(ui, server)

我在每个图的右下角添加了一个小按钮。单击时，绘图会放大到全屏，在全屏时，再次单击将返回正常视图。

如何使用

您需要做的就是将绘图组件放置在具有class = "plotly-full-screen" 的父组件或祖父母或祖父...父组件中。 如果您不喜欢按钮位置或颜色等，请更改.plot-zoom 样式。 另外一个好处是，当你使用 plotly screenshot 按钮时，这个全屏按钮将不包括在内。 在您的应用中包含style 和script 标签。通常，您希望样式靠近应用的顶部（头部），并将脚本放置在绘图标签之后。

缩放前

缩放后

享受吧！