Highchart在Shiny应用程序中未占据整个div

Question

我低于Shiny-app

library(shiny)
library(highcharter)
library(shinycustomloader)

Data1 = structure(list(x = c(39, 15, 21, 71, 39, 34, -47, 67, 5, 1, -41, 
                             41, 6, 52, 84, 10, 67, -53, 15, 21, 51), y = c(0, -7, 75, 100, -67, 
                            52, 100, 100, -200, 0, -100, 28, 19, 100, 35, 39, 24, -73, 100, 
                            29, 81), z = c("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", 
                                           "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u")), row.names = c(NA, 
                            -21L), class = "data.frame")

ui <- fluidPage(
  div(style = "height: 1000px; width: 80%; margin: 0; padding: 0; background-color: rgba(0,0,0,.4)",
      div(style = "height: 100%; width: 100%; margin: 0; padding: 0",
          highchartOutput("Result",  width = "100%", height = "100%") %>% withLoader(type = "html", loader = "loader6")
        ))
)

server = function(input, output) {

output$Result = 
        renderHighchart({

            HighCharts_Plot =
                hchart(Data1, "scatter", hcaes(x, y)) %>%
                    hc_chart(plotBorderWidth = 1, plotBorderColor = '#b4b4b4') %>%
                    hc_annotations(list(labelOptions = list(y = 35, x = 0, backgroundColor = 'rgba(0, 0, 0, 0)', borderColor = "rgba(0,0,0,0)"),
                                        labels = list(list(point = list(x = (max(abs(range(Data1$x))) + 0)/2, y = 0, xAxis = 0, yAxis = 0),
                                                            style = list(color = '#6f6f6f', fontSize = 8),
                                                            useHTML = TRUE,
                                                            text = paste("<span style = '", "padding: 3px; background-color: rgba(0,0,0,.4)", "'>AAA  AAA  AAA  AAA  AAA  </span>", sep = ""))))) %>%
                    hc_tooltip(outside = TRUE) 
            HighCharts_Plot

        })

}

shinyApp(ui = ui, server = server)

如您在此处看到的，当将高度定义为highchart而不是div时，percentage没有占据整个px。但是，%通常需要将高度设置为responsive web-page design。

有什么方法可以正确处理％高度声明？

Answer 1

Highcharts图表默认高度为400px。您可以设置chart.height: '100%'https://api.highcharts.com/highcharts/chart.height

hc_chart(plotBorderWidth = 1, plotBorderColor = '#b4b4b4', height = '100%') %>%

图表将获得父容器的100％，即shiny-loader-output-container，但由于某种原因，此shiny-loader-output-container容器的父容器的高度未达到100％。