根据窗口大小动态调整闪亮绘图输出的高度和/或宽度
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)
【讨论】:
以上是关于根据窗口大小动态调整闪亮绘图输出的高度和/或宽度的主要内容,如果未能解决你的问题,请参考以下文章