闪亮：Highcharter Solid Gauge格式化CSS

Question

我的highcharter: solid guage应用中有shiny，但是tabPanel中的应用空间太大。如何减少未使用的空白？

此外，当我调整屏幕尺寸（如下）时，它无法正确调整尺寸。无论屏幕大小如何如何确保它看起来仍然一样？

下面是重新创建的代码：

library (shinydashboard)
library (highcharter)

#Header----
header <- dashboardHeader()

#Left Sidebar----
sidebar <- dashboardSidebar()

#Body----
body <- dashboardBody(
  tabBox(id = "WIPMovementBox",
         tabPanel("Today",
                  splitLayout(highchartOutput("Gate0Day"),
                              highchartOutput("Gate1Day"),
                              highchartOutput("Gate2Day"),
                              highchartOutput("Gate3Day"),
                              highchartOutput("Gate4Day")
                  )
         ), width = 12
  ),

  tags$head(tags$style(HTML("
                            #Gate0Day {height:25vh !important;}
                            #Gate1Day {height:25vh !important;}
                            #Gate2Day {height:25vh !important;}
                            #Gate3Day {height:25vh !important;}
                            #Gate4Day {height:25vh !important;}
                            ")))

)

#Builds Dashboard Page----
ui <- dashboardPage(header, sidebar, body)

server <- function(input, output, session) {

  #Gate 0----
  output$Gate0Day <- renderHighchart({

    col.stops<-data.frame(q = c(5,20,50), c = c('#D20000','#F6FC00','#009A00'),stringsAsFactors = FALSE)
    col.stops.list <- list_parse2(col.stops)

    highchart() %>%
      hc_chart(type = "solidgauge") %>%
      hc_add_series(data = c(10), dataLabels=list(y=-50,borderWidth=0, useHTML=TRUE,style = list(fontSize = "40px"))) %>%
      hc_title(y=50, text = "Gate 0") %>%
      hc_pane(startAngle = -90,
              endAngle = 90,
              background= list(
                outerRadius = '100%',
                innerRadius = '60%',
                shape="arc"
                #backgroundColor = JS("Highcharts.Color('#9DFF02').setOpacity(0.1).get()")
              )
      ) %>%  
      hc_yAxis_multiples(
        list(
          stops=col.stops.list,
          lineWidth=0,
          minorTickWidth=0,
          tickAmount=1,
          min = 0,
          max = 100,
          labels=list(y = 26,x = 5, style = list(fontSize = "22px"))
        ), 
        list(
          linkedTo=0,
          lineWidth=0,
          minorTickLength=0,
          tickPosition="inside",
          tickPositions=list(20),
          tickLength= 39,
          tickColor="#999999",
          tickWidth=3,
          labels=list(distance=11,style = list(fontSize = "125%"))
        )
      ) %>%  
      hc_tooltip(enabled = FALSE)


  })
  #Gate 1----
  output$Gate1Day <- renderHighchart({

    col.stops<-data.frame(q = c(5,20,50), c = c('#D20000','#F6FC00','#009A00'),stringsAsFactors = FALSE)
    col.stops.list <- list_parse2(col.stops)

    highchart() %>%
      hc_chart(type = "solidgauge") %>%
      hc_add_series(data = c(10), dataLabels=list(y=-50,borderWidth=0, useHTML=TRUE,style = list(fontSize = "40px"))) %>%
      hc_title(y=50, text = "Gate 1") %>%
      hc_pane(startAngle = -90,
              endAngle = 90,
              background= list(
                outerRadius = '100%',
                innerRadius = '60%',
                shape="arc"
                #backgroundColor = JS("Highcharts.Color('#9DFF02').setOpacity(0.1).get()")
              )
      ) %>%  
      hc_yAxis_multiples(
        list(
          stops=col.stops.list,
          lineWidth=0,
          minorTickWidth=0,
          tickAmount=1,
          min = 0,
          max = 100,
          labels=list(y = 26,x = 5, style = list(fontSize = "22px"))
        ), 
        list(
          linkedTo=0,
          lineWidth=0,
          minorTickLength=0,
          tickPosition="inside",
          tickPositions=list(20),
          tickLength= 39,
          tickColor="#999999",
          tickWidth=3,
          labels=list(distance=11,style = list(fontSize = "125%"))
        )
      ) %>%  
      hc_tooltip(enabled = FALSE)


  })
  #Gate 2----
  output$Gate2Day <- renderHighchart({

    col.stops<-data.frame(q = c(5,20,50), c = c('#D20000','#F6FC00','#009A00'),stringsAsFactors = FALSE)
    col.stops.list <- list_parse2(col.stops)

    highchart() %>%
      hc_chart(type = "solidgauge") %>%
      hc_add_series(data = c(10), dataLabels=list(y=-50,borderWidth=0, useHTML=TRUE,style = list(fontSize = "40px"))) %>%
      hc_title(y=50, text = "Gate 2") %>%
      hc_pane(startAngle = -90,
              endAngle = 90,
              background= list(
                outerRadius = '100%',
                innerRadius = '60%',
                shape="arc"
                #backgroundColor = JS("Highcharts.Color('#9DFF02').setOpacity(0.1).get()")
              )
      ) %>%  
      hc_yAxis_multiples(
        list(
          stops=col.stops.list,
          lineWidth=0,
          minorTickWidth=0,
          tickAmount=1,
          min = 0,
          max = 100,
          labels=list(y = 26,x = 5, style = list(fontSize = "22px"))
        ), 
        list(
          linkedTo=0,
          lineWidth=0,
          minorTickLength=0,
          tickPosition="inside",
          tickPositions=list(20),
          tickLength= 39,
          tickColor="#999999",
          tickWidth=3,
          labels=list(distance=11,style = list(fontSize = "125%"))
        )
      ) %>%  
      hc_tooltip(enabled = FALSE)


  })
  #Gate 3----
  output$Gate3Day <- renderHighchart({

    col.stops<-data.frame(q = c(5,20,50), c = c('#D20000','#F6FC00','#009A00'),stringsAsFactors = FALSE)
    col.stops.list <- list_parse2(col.stops)

    highchart() %>%
      hc_chart(type = "solidgauge") %>%
      hc_add_series(data = c(10), dataLabels=list(y=-50,borderWidth=0, useHTML=TRUE,style = list(fontSize = "40px"))) %>%
      hc_title(y=50, text = "Gate 3") %>%
      hc_pane(startAngle = -90,
              endAngle = 90,
              background= list(
                outerRadius = '100%',
                innerRadius = '60%',
                shape="arc"
                #backgroundColor = JS("Highcharts.Color('#9DFF02').setOpacity(0.1).get()")
              )
      ) %>%  
      hc_yAxis_multiples(
        list(
          stops=col.stops.list,
          lineWidth=0,
          minorTickWidth=0,
          tickAmount=1,
          min = 0,
          max = 100,
          labels=list(y = 26,x = 5, style = list(fontSize = "22px"))
        ), 
        list(
          linkedTo=0,
          lineWidth=0,
          minorTickLength=0,
          tickPosition="inside",
          tickPositions=list(20),
          tickLength= 39,
          tickColor="#999999",
          tickWidth=3,
          labels=list(distance=11,style = list(fontSize = "125%"))
        )
      ) %>%  
      hc_tooltip(enabled = FALSE)


  })
  #Gate 4----
  output$Gate4Day <- renderHighchart({

    col.stops<-data.frame(q = c(5,20,50), c = c('#D20000','#F6FC00','#009A00'),stringsAsFactors = FALSE)
    col.stops.list <- list_parse2(col.stops)

    highchart() %>%
      hc_chart(type = "solidgauge") %>%
      hc_add_series(data = c(10), dataLabels=list(y=-50,borderWidth=0, useHTML=TRUE,style = list(fontSize = "40px"))) %>%
      hc_title(y=50, text = "Gate 4") %>%
      hc_pane(startAngle = -90,
              endAngle = 90,
              background= list(
                outerRadius = '100%',
                innerRadius = '60%',
                shape="arc"
                #backgroundColor = JS("Highcharts.Color('#9DFF02').setOpacity(0.1).get()")
              )
      ) %>%  
      hc_yAxis_multiples(
        list(
          stops=col.stops.list,
          lineWidth=0,
          minorTickWidth=0,
          tickAmount=1,
          min = 0,
          max = 100,
          labels=list(y = 26,x = 5, style = list(fontSize = "22px"))
        ), 
        list(
          linkedTo=0,
          lineWidth=0,
          minorTickLength=0,
          tickPosition="inside",
          tickPositions=list(20),
          tickLength= 39,
          tickColor="#999999",
          tickWidth=3,
          labels=list(distance=11,style = list(fontSize = "125%"))
        )
      ) %>%  
      hc_tooltip(enabled = FALSE)


  })

}

#Combines Dasboard and Data together----
shinyApp(ui, server)