0

我正在尝试在 R Shiny 中制作自定义值框。我发现了如何改变背景的颜色，但是有些东西让我的值框很粗，并且在它们之间留下了很大的间隙。理想情况下，我想在一条线上显示 3，但即使宽度为 4，它们也会显得被压扁。我怎样才能让他们有更多的红色，中间只有一点白色。

下面是一个可重现的示例以及屏幕截图。在此处输入图像描述

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

red_box_format <- ".inner , p , h3 { background-color: red};"


ui <- fluidPage(
    
    sidebarLayout(
        sidebarPanel(
            textInput(inputId = "greeting",
                      label = "Say hi!"),
            actionButton(inputId = "submit", 
                         label = "Submit")
            
        ),
        mainPanel(
            tags$style(red_box_format),
            column(4,align="center",div(valueBoxOutput("total_perfect"), style= "color: #FFFFFF")),
            column(4,align="center",div(valueBoxOutput("total_fails"), style= "color: #FFFFFF"))
        )
    ))
server <- function(input, output) {
    
    data <- tibble(name = c("Justin", "Corey", "Sibley"),
                   grade = c(50, 100, 100))
    
    
    output$total_perfect <- renderValueBox({
        shiny::req(input$greeting)
        shiny::req(input$submit)
        if(input$greeting == "hi!") {
            num_100s <- data %>% filter(grade == 100) %>% nrow()
            valueBox(value = num_100s, subtitle = "Number of Perfect Scores")
        }
    })
    
    output$total_fails <- renderValueBox({
        shiny::req(input$greeting)
        shiny::req(input$submit)
        if(input$greeting == "hi!") {
            num_50s <- data %>% filter(grade == 50) %>% nrow()
            valueBox(value = num_50s, subtitle = "Number of Failures")
        }
    })
    
}
shinyApp(ui, server)
4

2 回答 2

2

将输出插入 a fluidRow; 它们将更好地放置在 bootstrap 网格中：

mainPanel(
      fluidRow(
      tags$style(red_box_format),
      valueBoxOutput("total_perfect"),
      valueBoxOutput("total_fails")
    ))

然后，您必须在以下位置渲染它们server：

valueBox(value = tags$p(num_100s, style = "text-align:center;color: #FFFFFF;"),
               subtitle = tags$p("Number of Perfect Scores", style = "text-align:center;color: #FFFFFF;"))
于 2021-06-14T20:40:14.893 回答
0

如果这是有用的，我扩展了上述答案以允许对每个单独的框进行颜色编码，包括如果您愿意，如何将多种颜色合并到一个值框中。（下面的屏幕截图、代码和解释/提示[特别是如果你是 CSS 新手，比如我]）。

截屏

在此处输入图像描述

代码

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

navy_inner_box <- "#total_fails .inner{ background-color: navy};"
yellow_inner_box <- "#total_perfect .inner , p , h3 { background-color: yellow};"


ui <- fluidPage(
    
    sidebarLayout(
        sidebarPanel(
            textInput(inputId = "greeting",
                      label = "Say hi!"),
            actionButton(inputId = "submit", 
                         label = "Submit")
            
        ),
        mainPanel(
            fluidRow(
                tags$style(yellow_inner_box),
                tags$style(navy_inner_box),
                valueBoxOutput("total_perfect"),
                valueBoxOutput("total_fails")
            ))
    ))
server <- function(input, output) {
    
    data <- tibble(name = c("Justin", "Corey", "Sibley"),
                   grade = c(50, 100, 100))
    
    
    output$total_perfect <- renderValueBox({
        shiny::req(input$greeting)
        shiny::req(input$submit)
        if(input$greeting == "hi!") {
            num_100s <- data %>% filter(grade == 100) %>% nrow()
            valueBox(value = tags$p(num_100s, style = "text-align:center;color: #FFFFFF; background-color: red"),
                     subtitle = tags$p("Number of Perfect Scores", style = "text-align:center;color: #FFFFFF; background-color: red"))        }
    })
    
    output$total_fails <- renderValueBox({
        shiny::req(input$greeting)
        shiny::req(input$submit)
        if(input$greeting == "hi!") {
            num_50s <- data %>% filter(grade == 50) %>% nrow()
            valueBox(value = tags$p(num_50s, style = "text-align:center;color: #FFFFFF; background-color: navy"),
                     subtitle = tags$p("Number of Total Failures", style = "text-align:center;color: #FFFFFF; background-color: navy"))}
    })
    
}
shinyApp(ui, server)

说明/提示

作为一个刚接触 CSS 的人，我不明白为什么当我指定背景颜色参数时，这些框要么不改变颜色，要么只改变其中的一部分。值框分为 3 部分：值（我的屏幕截图中的 2 和 1）、字幕和内部（没有文本的部分）。每一个都有自己的背景，所以如果你想让每个盒子有不同的颜色，你需要通过它们的名字来指定每个盒子的颜色（注意 navy_inner_box 中#total_fails 的 CSS 名称是如何与输出名称对应的，输出$total_fails。

其他背景颜色在分别包装服务器中的值和字幕的调用中指定。

如果不是通过免费的 Google Chrome 扩展程序CSS Selector，我不会发现这些盒子的内部名称。如果您是 CSS 新手并且标签对您来说没有直观意义，我强烈建议您检查一下。

于 2021-06-15T14:44:00.937 回答