[英]Automatically adjust plot size according to windows size in shinyDashbord
I am using shiny dashboard for making an app. 我正在使用闪亮的仪表板制作应用程序。 What I want is that when you run this app then plot size will adjust automatically according to windows size .I have tried this code for automatically adjust height and weight of a plot according to windows size..
我想要的是,当你运行这个应用程序时,绘图大小将根据窗口大小自动调整。我已经尝试此代码根据窗口大小自动调整绘图的高度和重量..
The width of the plot is changing its size according to the app window size by using following code but the height isn't ? 绘图的宽度是通过使用以下代码根据应用程序窗口大小更改其大小,但高度不是?
sidebar <- dashboardSidebar(
sidebarMenu(menuItem("plot",tabName = "plot"),
menuItem("Plot1",tabName = "Plot1"),
)
body <- dashboardBody(
tabitems(
tabItem(tabName = "plot",
box( width = "100%" , height = "100%", solidHeader = FALSE, status = "primary",
plotOutput("plot"))
)
tabItem(tabName = "plot1",
box( width = "100%" , height = "100%", solidHeader = FALSE, status = "primary",
plotOutput("plot1")))
Is seems like if the box height is initialized as 100% in dashboardBody it wont re-size to the page, to fix this we can re-size the box manually from Javascript. 似乎如果在仪表板中将框高度初始化为100%它不会重新调整页面大小,为了解决这个问题,我们可以从Javascript手动重新调整框的大小。
library(shiny)
library(shinydashboard)
ui <-dashboardPage(
dashboardHeader(),
dashboardSidebar(
),
dashboardBody(
tags$head(
tags$script(
HTML("
window.onload = function() {
resize();
}
window.onresize = function() {
resize();
}
Shiny.addCustomMessageHandler ('triggerResize',function (val) {
window.dispatchEvent(new Event('resize'));
});
function resize(){
var h = window.innerHeight - $('.navbar').height() - 150; // Get dashboardBody height
$('#box').height(h);
}"
)
)
),
box( id ="box",
width = 12,
height = "100%",
solidHeader = FALSE,
status = "primary",
plotOutput("plot1",inline=F,width="100%",height="100%")
),
actionButton("plot","plot")
)
)
server <- shinyServer(function(input, output, session) {
observeEvent(input$plot,{
session$sendCustomMessage (type="triggerResize", 1)
output$plot1 <- renderPlot({plot(runif(100),runif(100))})
})
})
shinyApp(ui = ui, server = server)
Alternatively you can modify the Javascript like: 或者你可以修改Javascript,如:
HTML("
$(document).ready(function(){
resize();
})
function resize(){
var h = window.innerHeight - $('.navbar').height() - 150; // Get dashboardBody height
$('#box').height(h);
}"
) # END html
And skip the call to Javascript from the observer. 并从观察者跳过对Javascript的调用。
Is this of any help? 这有什么帮助吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.