根据窗口大小动态调整闪亮绘图输出的高度和/或宽度

Posted

技术标签:

【中文标题】根据窗口大小动态调整闪亮绘图输出的高度和/或宽度【英文标题】:dynamically adjust height and/or width of shiny-plotly output based on window size 【发布时间】:2017-11-03 14:53:21 【问题描述】:

我希望将闪亮的输出高度和宽度调整为当前窗口大小。我尝试使用以下但没有用。

ShinyUi <- fluidPage(

  # Application title
  titlePanel("title"),

  sidebarLayout(
    sidebarPanel(
      ... inputs ...
    ),

    mainPanel(
          plotlyOutput("distPlot", height = 'auto', width = 'auto')
      )
  ))

ShinyServer <- function(input, output, session) 

   output$distPlot <- renderPlotly(

    p <- ggplot(dataShow, aes(x=dataShow$X, y=dataShow$Y))  + 
geom_point(shape=1, alpha = 0.5, color = "grey50")

    ggplotly(p)

  )




# Run the application 
shinyApp(ui = ShinyUi, server = ShinyServer)

您是否知道可能在服务器功能中使用任何其他选项来代替上述 UI 功能用法?

小窗口:

扩展窗口:

【问题讨论】:

你已经在使用fluidPage()了吗? @BigDataScientist 请查看更新帖子中包含的代码结构。 shiny-plotly output height and width adjusted to the current window size 是什么意思?你想让它占据你屏幕尺寸的一定比例吗? @SBista 它应该根据可用的窗口属性调整大小。或者换句话说,它应该一直占据窗口区域的 75%。为了更清晰的画面,我在增加浏览器窗口大小之前和之后都添加了数字。 一种乏味且需要js 的方法是获取窗口大小并将其传递给ggplotly 函数。参考this链接获取窗口大小。 【参考方案1】:

它没有回答您的问题,但根据我的 cmets,您可以使用来自 this 链接的 js 将绘图高度和宽度添加到 ggplotly 函数。

我已经准备了一个您想要的最小示例。

library(shiny)
library(plotly)

ShinyUi <- fluidPage(
  tags$head(tags$script('
                        var dimension = [0, 0];
                        $(document).on("shiny:connected", function(e) 
                        dimension[0] = window.innerWidth;
                        dimension[1] = window.innerHeight;
                        Shiny.onInputChange("dimension", dimension);
                        );
                        $(window).resize(function(e) 
                        dimension[0] = window.innerWidth;
                        dimension[1] = window.innerHeight;
                        Shiny.onInputChange("dimension", dimension);
                        );
                        ')),

      plotlyOutput("distPlot", width = "auto")

  )

ShinyServer <- function(input, output, session) 


  #To make the responsive to the change in UI size
  observeEvent(input$dimension,

    output$distPlot <- renderPlotly(

      p <- ggplot(iris, aes(x = Sepal.Length, y=Sepal.Width))  +
        geom_point(shape=1, alpha = 0.5, color = "grey50")
      ggplotly(p, width = (0.95*as.numeric(input$dimension[1])), height = as.numeric(input$dimension[2]))

    )

  )




# Run the application 
shinyApp(ui = ShinyUi, server = ShinyServer)

你得到的输出如下:

现在,当您使窗口更小时,您仍然会得到一个占据整个屏幕的绘图(没有滚动条!),如下所示:

【讨论】:

好的,谢谢。虽然它没有回答我的问题,但它提供了实现解决方案的有用方法。 (如果在接下来的几天里没有另一个直接的答案,我会接受这个作为(解决方法)答案。) 我觉得他在很大程度上回答了你的问题。看起来 R 的 plotly 库没有一个简单的方法来实现这一点。他的解决方案比我的更优雅;还没有找到一样好的东西。【参考方案2】:

前进

请先查看@SBista 的帖子。

我只是想为一个特殊用例添加该响应:降低 Shiny 尝试重新渲染可视化的频率,因为通过用鼠标抓住窗口的一个边缘来缓慢调整窗口的大小,然后以这种方式调整大小。对我来说,渲染时间需要一段时间,而且如果没有这个额外的代码,它会从一个窗口大小调整中背靠背进行多次重新渲染。

回答

在我的ui.R 中,我有一个tags$script,其中包含以下 JS 字符串:

console.log("INFO: Loaded ui.R custom JS.");

// VARS
const REFRESH_RATE_MIN_SECONDS = 1.5;
var dimension = [0, 0];
var notRecentlyRendered = true;
var midRender = false;
var timeNow = Date.now();
var lastRendered;
var nowDiffMs;

// METHODS
$(document).on("shiny:connected", function(e) 
    dimension[0] = window.innerWidth;
    dimension[1] = window.innerHeight;
    Shiny.onInputChange("dimension", dimension);
)

$(window).resize(function(e) 
    timeNow = Date.now();
    firstRender = (typeof(lastRendered) === "undefined");

    if (firstRender === true) 
      nowDiffMs = timeNow - lastRendered;
      refreshRateMinMs = REFRESH_RATE_MIN_SECONDS * 1000;
      notRecentlyRendered = nowDiffMs > refreshRateMinMs;
    

    if ((midRender === false) && (notRecentlyRendered === true)) 
      console.log("INFO: Adjusting figure height.");
      dimension[0] = window.innerWidth;
      dimension[1] = window.innerHeight;
      midRender = true;
      Shiny.onInputChange("dimension", dimension);
    
)

在我的 server.R 文件中,我有我的 observable:

observeEvent(input$dimension,
    output$multi_indicator_facility <- renderPlotly(
      plot.multi_indicator_facility(input)
)

在我有plot.multi_indicator_facility() 的另一个文件中,大致如下:

gg = ggplot(...)  # ... = a lot of code
ggp = ggplotly(gg, height=figure.height)  # I took figure.height from input$dimension
# More JS within R: 
ggp = onRender(
      ggp, '
      function(el)  
        console.log("Rendered.");
        lastRendered = Date.now();
        midRender = false;
      
    ')
return(ggp)

也不要忘记包含 htmlwidgets 库以使用 onRender。

library('htmlwidgets')  # <-- include this somewhere (e.g. server.R)

【讨论】:

以上是关于根据窗口大小动态调整闪亮绘图输出的高度和/或宽度的主要内容,如果未能解决你的问题,请参考以下文章

根据父窗口小部件的宽度和高度放置一个自动调整大小的窗口小部件

调整窗口大小会导致位图被覆盖

闪亮的ggplotly图的动态高度

如何使用 JQuery 动态获取 Body 元素高度

如何在css中动态调整图像大小?

如何根据文本宽度动态调整 SVG 矩形的大小?