0

I have looked online everywhere to no avail. I cannot seem to get these plots to maximize their heights and widths to full window size upon maximizing the boxes. It is a requirement that I use bs4Dash. I looked at this post but the provided solutions did not seem to work for me. What am I missing?

library(shiny)
library(bs4Dash)
library(circlepackeR) # devtools::install_github("jeromefroe/circlepackeR")
library(wordcloud2) # devtools::install_github("lchiffon/wordcloud2")
library(plotly)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(
    # Boxes need to be put in a row (or column)
    fluidRow(
      box(id="histbox", 
          title = "hist box", 
          plotOutput("plot1", 
                     height = 250),
          maximizable = T),
      
      box(id = "circlebox", title="circle box", 
          circlepackeR::circlepackeROutput("circles"), maximizable = T)
      
    ),
    fluidRow(
      box(id="wordlcoudbox", 
          title = "wordcloud box", 
          wordcloud2::wordcloud2Output("cloud"), 
          maximizable = T),
      
      box(id = "plotlybox",
          title = "plotly box", 
          plotly::plotlyOutput("plotlyplot"), 
          maximizable = T))
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)
  
  output$plot1 <- renderPlot({
    data <- histdata[seq_len(10)]
    hist(data)
  })
  
  
  output$plotlyplot <- renderPlotly(
    plot1 <- plot_ly(
      type = 'scatter',
      mode = 'markers')
  )
  
  
  
  hierarchical_list <- list(name = "World",
                            children = list(
                              list(name = "North America",
                                   children = list(
                                     list(name = "United States", size = 308865000),
                                     list(name = "Mexico", size = 107550697),
                                     list(name = "Canada", size = 34033000))),
                              list(name = "South America", 
                                   children = list(
                                     list(name = "Brazil", size = 192612000),
                                     list(name = "Colombia", size = 45349000),
                                     list(name = "Argentina", size = 40134425))),
                              list(name = "Europe",  
                                   children = list(
                                     list(name = "Germany", size = 81757600),
                                     list(name = "France", size = 65447374),
                                     list(name = "United Kingdom", size = 62041708))),
                              list(name = "Africa",  
                                   children = list(
                                     list(name = "Nigeria", size = 154729000),
                                     list(name = "Ethiopia", size = 79221000),
                                     list(name = "Egypt", size = 77979000))),
                              list(name = "Asia",  
                                   children = list(
                                     list(name = "China", size = 1336335000),
                                     list(name = "India", size = 1178225000),
                                     list(name = "Indonesia", size = 231369500)))
                            )
  )
  
  output$cloud <- wordcloud2::renderWordcloud2(wordcloud2(demoFreq, 
                                                          minRotation = -pi/6, 
                                                          maxRotation = -pi/6, 
                                                          minSize = 10,
                                                          rotateRatio = 1))
  
  output$circles <- circlepackeR::renderCirclepackeR(circlepackeR(hierarchical_list))
  
}

shinyApp(ui, server)
4

1 回答 1

1

以下不是一个完全有效的答案，但无论如何我都会分享它：

我们可以使用library(shinyjs)动态改变 CSS 样式属性。请参阅此相关文章。

但是，wordcloud2不要circlepackeR像预期的那样对它们的height和width论点做出反应——只有边距发生变化，但图表的大小保持不变（无论这些论点在哪里改变）。

base只有在最大化它的盒子两次后，情节才会调整大小。

该plotly图表工作正常。

library(shiny)
library(bs4Dash)
library(circlepackeR) # devtools::install_github("jeromefroe/circlepackeR")
library(wordcloud2) # devtools::install_github("lchiffon/wordcloud2")
library(plotly)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    # Boxes need to be put in a row (or column)
    fluidRow(
      box(id="histbox", 
          title = "hist box", 
          plotOutput("plot1", width = "100%"),
          maximizable = T),
      box(id = "circlebox", title="circle box", 
          circlepackeR::circlepackeROutput("circles"), # , width = "2000px", height = "2000px" # hopeless, only adds space - plot remains the same size
          maximizable = T)
    ),
    fluidRow(
      box(id="wordlcoudbox", 
          title = "wordcloud box", 
          wordcloud2::wordcloud2Output("cloud"), # , width = "2000px", height = "2000px" # hopeless, only adds space - cloud remains the same size
          maximizable = T),
      box(id = "plotlybox",
          title = "plotly box", 
          plotly::plotlyOutput("plotlyplot"), 
          maximizable = T))
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)
  
  output$plot1 <- renderPlot({
    data <- histdata[seq_len(10)]
    hist(data)
  })
  
  output$plotlyplot <- renderPlotly({
    plot_ly(type = 'scatter', mode = 'markers')
  })
  
  hierarchical_list <- list(name = "World",
                            children = list(
                              list(name = "North America",
                                   children = list(
                                     list(name = "United States", size = 308865000),
                                     list(name = "Mexico", size = 107550697),
                                     list(name = "Canada", size = 34033000))),
                              list(name = "South America", 
                                   children = list(
                                     list(name = "Brazil", size = 192612000),
                                     list(name = "Colombia", size = 45349000),
                                     list(name = "Argentina", size = 40134425))),
                              list(name = "Europe",  
                                   children = list(
                                     list(name = "Germany", size = 81757600),
                                     list(name = "France", size = 65447374),
                                     list(name = "United Kingdom", size = 62041708))),
                              list(name = "Africa",  
                                   children = list(
                                     list(name = "Nigeria", size = 154729000),
                                     list(name = "Ethiopia", size = 79221000),
                                     list(name = "Egypt", size = 77979000))),
                              list(name = "Asia",  
                                   children = list(
                                     list(name = "China", size = 1336335000),
                                     list(name = "India", size = 1178225000),
                                     list(name = "Indonesia", size = 231369500)))
                            )
  )
  
  output$cloud <- wordcloud2::renderWordcloud2(wordcloud2(demoFreq,
                                                          minRotation = -pi/6, 
                                                          maxRotation = -pi/6, 
                                                          minSize = 10,
                                                          rotateRatio = 1))
  
  output$circles <- circlepackeR::renderCirclepackeR(circlepackeR(hierarchical_list))
  
  observeEvent(input$histbox$maximized, {
    if(input$histbox$maximized){
      # runjs('document.getElementById("histbox").style.setProperty("background-color", "green", "important");')
      runjs('var plot1 = document.querySelector("#plot1 > img")
            plot1.style.setProperty("height", "90vh", "important");
            plot1.style.setProperty("width", "100%", "important");')
    } else {
      runjs('var plot1 = document.querySelector("#plot1 > img")
            plot1.style.setProperty("height", "400px", "important");
            plot1.style.setProperty("width", "100%", "important");')
    }
  })
  
  observeEvent(input$plotlybox$maximized, {
    if(input$plotlybox$maximized){
      # runjs('document.getElementById("plotlybox").style.setProperty("background-color", "red", "important");')
      runjs('var plotlyplot = document.querySelector("#plotlyplot");
            plotlyplot.style.setProperty("height", "90vh", "important");
            plotlyplot.style.setProperty("width", "100%", "important");')
    } else {
      runjs('var plotlyplot = document.querySelector("#plotlyplot");
            plotlyplot.style.setProperty("height", "400px", "important");
            plotlyplot.style.setProperty("width", "100%", "important");')
    }
  })
  

# not working -------------------------------------------------------------

  # observeEvent(input$circlebox$maximized, {
  #   if(input$circlebox$maximized){
  #     runjs('document.querySelector("#circles").style.setProperty("height", "90vh", "important");
  #           document.querySelector("#circles").style.setProperty("width", "100%", "important");')
  #   } else {
  #     runjs('document.querySelector("#circles").style.setProperty("height", "400px", "important");
  #           document.querySelector("#circles").style.setProperty("width", "100%", "important");')
  #   }
  # })
  # 
  # observeEvent(input$wordlcoudbox$maximized, {
  #   if(input$wordlcoudbox$maximized){
  #     runjs('document.querySelector("#cloud").style.setProperty("height", "90vh", "important");
  #           document.querySelector("#cloud").style.setProperty("width", "100%", "important");')
  #   } else {
  #     runjs('document.querySelector("#cloud").style.setProperty("height", "400px", "important");
  #           document.querySelector("#cloud").style.setProperty("width", "100%", "important");')
  #   }
  # })
  
}

shinyApp(ui, server)
于 2022-01-21T13:32:36.860 回答