以R为单位的 highcharts 相对高度

zyfwsgd6  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(190)

下面的代码:

library(dplyr)
library(shiny)
library(shinydashboard)
library(highcharter)

c <- data.frame(Y = c(2017,2018,2019), A = c(30,54,77))

ui <- navbarPage(
  "Company",
  navbarMenu("Sales",
             tabPanel("Report",
                      uiOutput("sales"))
  )

)

server <- function(input, output, session) {
   output$firstplot <- renderHighchart({
     c%>%hchart("column",
                hcaes(x="Y",y="A"))%>%
       hc_size(height = 400)
   })

   output$secondplot <- renderHighchart({
     c%>%hchart("column",
                hcaes(x="Y",y="A"))%>%
       hc_size(height = 200)%>%
       hc_colors("red")
   })

   output$thirdplot <- renderHighchart({
     c%>%hchart("column",
                hcaes(x="Y",y="A"))%>%
       hc_size(height = 200)%>%
       hc_colors("green")
   })

   output$sales <- renderUI({
     tagList(
       fluidRow(
         column(
           7,
           highchartOutput("firstplot")),
         column(
           5,
           fluidRow(
             highchartOutput("secondplot"),
             style = "height: 200px"),
           fluidRow(
             highchartOutput("thirdplot"),
             style = "height: 200px")),
         style = "height: 400px")
     )
   })
}

shinyApp(ui, server)

结果我得到:

但当我向下还原或最大化时:

第二个和第三个图混在一起。我想知道如何使图的大小相对,所以这不会发生。我试过使用百分比,但不起作用。
先谢谢你。

cotxawn7

cotxawn71#

通过添加一些JavaScript将输出的高度设置回200px,在每次调整窗口大小时修复此问题:

library(dplyr)
library(shiny)
library(shinydashboard)
library(highcharter)

c <- data.frame(Y = c(2017,2018,2019), A = c(30,54,77))

ui <- navbarPage(
  "Company",
  navbarMenu("Sales",
             tabPanel("Report",
                      HTML(
                        paste0("
                        <script>
                           window.onresize = function(){
                               var SECONDP = document.querySelector('#secondplot');
                               SECONDP.style.height = '200px';
                               var THIRDP = document.querySelector('#thirdplot');
                               THIRDP.style.height = '200px';
                           };
                        </script>")
                      ),
                      uiOutput("sales"))
  )

)

server <- function(input, output, session) {
  output$firstplot <- renderHighchart({
    c%>%hchart("column",
               hcaes(x="Y",y="A"))%>%
      hc_size(height = 400)
  })

  output$secondplot <- renderHighchart({
    c%>%hchart("column",
               hcaes(x="Y",y="A"))%>%
      hc_size(height = 200)%>%
      hc_colors("red")
  })

  output$thirdplot <- renderHighchart({
    c%>%hchart("column",
               hcaes(x="Y",y="A"))%>%
      hc_size(height = 200)%>%
      hc_colors("green")
  })

  output$sales <- renderUI({
    tagList(
      fluidRow(
        column(
          7,
          highchartOutput("firstplot")),
        column(
          5,
          fluidRow(
            highchartOutput("secondplot"),
            style = "height: 200px"),
          fluidRow(
            highchartOutput("thirdplot"),
            style = "height: 200px")),
        style = "height: 400px")
    )
  })
}

shinyApp(ui, server)

相关问题