在 R shiny 应用程序中调整 flexdashboard 仪表的布局？

Question

我正在尝试在我闪亮的应用程序中生成一个仪表网格，但是我不确定如何调整我生成的仪表的布局。这是我的应用程序的代表：

# import libraries
library(shiny)
library(flexdashboard)
library(purrr)
library(magrittr)

ui <- fluidPage(
  # add first gauge set to ui
  fluidRow(
    uiOutput("first_gauge")),
  # add second gauge set to ui
  fluidRow(
    uiOutput("second_gauge"))
)

server <- function(input, output){
  # create first set of gauges
  output$first_gauge <- renderUI({
    # create 4 values and dynamically create gauges
    1:4 %>%
      purrr::map(flexdashboard::gauge, min = 0, max = 10)
  })
  # create second set of gauges
  output$second_gauge <- renderUI({
    # create 4 values and dynamically create gauges
    5:8 %>%
      purrr::map(flexdashboard::gauge, min = 0, max = 10)
  })
}

# run shiny app
shinyApp(ui, server)

此应用将 8 个仪表排成一长列，如下所示：

gauge1
gauge2
gauge3
gauge4
gauge5
gauge6
gauge7
gauge8

但我正在尝试将它们格式化为 2 行，每行 4，如下所示：

gauge1 gauge2 gauge3 gauge4
gauge5 gauge6 gauge7 gauge8

我不需要页面流畅，它可以固定。当我尝试弄乱 fluidRow 或 fixedRow 中的 column 设置时，仪表似乎没有移动。

我一直在尝试使用 includeCSS 并弄乱这些边距，但我知之甚少 CSS 而且这似乎并没有修改 [=29] 之间的边距=] 仪表：

.html-widget.gauge svg { height: 40%; margin-top: 10px; margin-bottom: 10px; }

Answer 1

使用这个

# import libraries
library(shiny)
library(flexdashboard)
library(purrr)
library(magrittr)

ui <- fluidPage(
    # add first gauge set to ui
    fluidRow(
        uiOutput("first_gauge")),
    # add second gauge set to ui
    fluidRow(
        uiOutput("second_gauge")),
    tags$style(".gauge.html-widget {display: inline-block;}"),
)

server <- function(input, output){
    # create first set of gauges
    output$first_gauge <- renderUI({
        # create 4 values and dynamically create gauges
        tagList(
            1:4 %>%
                purrr::map(flexdashboard::gauge, min = 0, max = 10),
            tags$script("$('.gauge.html-widget').css({height: '100px', width: '22%'})")
        )
    })
    # create second set of gauges
    output$second_gauge <- renderUI({
        # create 4 values and dynamically create gauges
        tagList(
            5:8 %>%
                purrr::map(flexdashboard::gauge, min = 0, max = 10),
            tags$script("$('.gauge.html-widget').css({height: '100px', width: '22%'})")
        )
    })
}

# run shiny app
shinyApp(ui, server)

我们首先需要将仪表显示从 block（默认）更改为 inline-block，以便它们可以显示在同一行中。 block表示当前元素占据了当前行的所有宽度，所以我们需要改变它。要改变这一点，我们可以简单地添加一个 style 标签。
默认 flexdashboard::gauge 需要很多高度和宽度，但是 R 函数没有为我们提供任何更改默认高度和宽度的参数，它使用 style="xxx" 作为 CSS 之后是 HTML，它具有最高的优先级。添加 style 标签将不起作用。我们需要使用 javascript 改变这个。由于仪表是从服务器动态呈现的，因此还需要在服务器上添加脚本。
要每行显示4个gauge，每个gauge占宽度的25%，但是在原来的样式中添加了一些padding，所以我们不能使用精确的25，必须小于这个数字。这里使用了22，改成你想要的合理数字。

在 R shiny 应用程序中调整 flexdashboard 仪表的布局？

Adjust layout of flexdashboard gauges in R shiny app?

css

r

shiny

flexdashboard