Question

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

.as-console-wrapper { max-height: 100% !important; top: 0; }

您是否知道可能在服务器功能中使用的任何其他选项而不是上述UI功能使用？

较小的窗口：

扩展窗口：

Answer 1

它没有回答您的问题，但根据我的评论，您可以使用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)

您获得的输出如下：

现在当你使窗口变得更小时，你仍会得到一个占据整个屏幕的图（没有滚动条！），如下所示：

Answer 2

前进

请先看@SBista 的帖子。

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

答案

在我的 ui.R 中，我有一个带有以下 JS 字符串的 tags$script：

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)

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

2 个答案:

前进

答案