Use.js to set the height of highcharter plot and shinydashboard box

问题

I have a shiny app in which I try to set the the height of the highcharter plot and the box that includes it with the same .js code. But it does not seem to respond.

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(highcharter)

jscode <-
  '$(document).on("shiny:connected", function(e) {
      var jsHeight = 0.65 * document.body.clientWidth; 
      Shiny.onInputChange("GetScreenHeight", jsHeight);
  });
'

shinyApp(
  ui = dashboardPagePlus(
    header = dashboardHeaderPlus(
    ),
    sidebar = dashboardSidebar(),

    body = dashboardBody(
      tags$script(jscode),
      boxPlus(
        title = "Closable Box with dropdown", 
        closable = TRUE, 
        width = NULL,
        status = "warning", 
        solidHeader = FALSE, 
        collapsible = TRUE,
        highchartOutput("pl",height = "100%")
      )
    )

  ),
  server = function(input, output) {

    output$pl <- renderHighchart({
      data(diamonds, mpg, package = "ggplot2")

      hchart(mpg, "scatter", hcaes(x = displ, y = hwy, group = class))%>%
        hc_size(height =input$GetScreenHeight )
    })
  }
)

回答1:

Here is a workaround using renderUI:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(highcharter)

jscode <- '$(document).on("shiny:connected", function(e) {
           var jsHeight = 0.65 * document.body.clientWidth;
           Shiny.onInputChange("GetScreenHeight", jsHeight);
           });'

shinyApp(
  ui = dashboardPagePlus(
    header = dashboardHeaderPlus(),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      tags$script(jscode),
      boxPlus(
        title = "Closable Box with dropdown",
        closable = TRUE,
        width = NULL,
        status = "warning",
        solidHeader = FALSE,
        collapsible = TRUE,
        uiOutput("plUI")
      )
    )
  ),
  server = function(input, output) {

    output$pl <- renderHighchart({
      data(diamonds, mpg, package = "ggplot2")
      hchart(mpg, "scatter", hcaes(x = displ, y = hwy, group = class))
    })

    output$plUI <- renderUI({highchartOutput("pl", height = input$GetScreenHeight)})
  }
)

Another very simple possibility to get relative plot heights is using the css unit 'vh'. Try e.g. highchartOutput("pl", height = "80vh") in your initial version (without renderUI). However, this way the plot is resized with the browser window.

来源：https://stackoverflow.com/questions/58828538/use-js-to-set-the-height-of-highcharter-plot-and-shinydashboard-box

标签

Highcharts

shinydashboard