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

2024-09-08 • 问答

我有一个闪亮的应用程序，其中我尝试使用相同的.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 )
    })
  }
)

这是使用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设置高位图和闪亮仪表板框的高度

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

大家都在问