根据 window 大小动态调整 shiny-plotly 输出的高度 and/or 宽度
dynamically adjust height and/or width of shiny-plotly output based on window size
我想将 shiny-plotly 输出高度和宽度调整为当前 window 大小。我尝试使用下面的但没有用。
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 函数用法,您是否知道可以在服务器函数中使用任何其他选项?
更小 Window:
展开Window:
它没有回答您的问题,但根据我的意见,您可以使用来自 link 的 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)
得到的输出结果如下:
现在,当您将 window 变小时,您仍然会得到一个占据整个屏幕的图(没有滚动条!),如下所示:
前进
请先看@SBista 的post。
我只是想为一个特殊用例添加该响应:降低 Shiny 尝试重新渲染可视化的频率,因为 window 通过抓住其中一个边缘来缓慢调整大小window 用鼠标调整大小。对我来说,渲染时间需要一段时间,如果没有这个额外的代码,它会从一次 window 调整大小开始重新渲染几次。
回答
在我的 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
文件中,我有我的可观察值:
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)
我想将 shiny-plotly 输出高度和宽度调整为当前 window 大小。我尝试使用下面的但没有用。
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 函数用法,您是否知道可以在服务器函数中使用任何其他选项?
更小 Window:
展开Window:
它没有回答您的问题,但根据我的意见,您可以使用来自 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)
得到的输出结果如下:
现在,当您将 window 变小时,您仍然会得到一个占据整个屏幕的图(没有滚动条!),如下所示:
前进
请先看@SBista 的post。
我只是想为一个特殊用例添加该响应:降低 Shiny 尝试重新渲染可视化的频率,因为 window 通过抓住其中一个边缘来缓慢调整大小window 用鼠标调整大小。对我来说,渲染时间需要一段时间,如果没有这个额外的代码,它会从一次 window 调整大小开始重新渲染几次。
回答
在我的 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
文件中,我有我的可观察值:
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)