Question

我有一个闪亮的应用程序，其中我尝试使用相同的.js代码设置highcharter图的高度和包括它的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）。但是，通过这种方式，可以通过浏览器窗口调整图的大小。

Use.js设置高位图和闪亮仪表板框的高度

1 个答案: