使用.js设置highcharter plot和shinydashboard box的高度

Question

我有一个闪亮的应用程序，我尝试在其中设置 highcharter 图的高度和包含相同 .js 代码的 box。但它似乎没有反应。

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 )
    })
  }
)

Answer 1

这是使用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)})
  }
)

获得相对地块高度的另一种非常简单的方法是使用css unit 'vh'。尝试例如highchartOutput("pl", height = "80vh") 在您的初始版本中（没有 renderUI）。但是，这种方式会随着浏览器窗口调整绘图的大小。