如何在R Shiny中创建带有Deltas的ValueBox仪表盘？

嘿，我刚好做过类似的需求，给你两种实用方案，都能轻松实现带Deltas差值标识的ValueBox效果：

如果不想额外安装扩展包，纯用原生shinydashboard就能搞定，核心思路是自定义ValueBox的内部HTML内容，通过CSS布局把主数值和Delta标识放在一起：

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "带Delta的ValueBox示例"),
  dashboardSidebar(),
  dashboardBody(
    # 正数Delta示例
    valueBox(
      div(
        style = "display: flex; justify-content: space-between; align-items: center;",
        span("12,500", style = "font-size: 2rem; font-weight: bold;"),
        span(
          style = "color: green; font-size: 1.2rem;",
          tags$i(class = "fa fa-arrow-up"), "12.5%"
        )
      ),
      subtitle = "月度销售额",
      icon = icon("dollar-sign"),
      color = "blue"
    ),
    
    # 负数Delta示例
    valueBox(
      div(
        style = "display: flex; justify-content: space-between; align-items: center;",
        span("890", style = "font-size: 2rem; font-weight: bold;"),
        span(
          style = "color: red; font-size: 1.2rem;",
          tags$i(class = "fa fa-arrow-down"), "3.2%"
        )
      ),
      subtitle = "客户投诉量",
      icon = icon("exclamation-triangle"),
      color = "yellow"
    )
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

这里用Flex布局让主数值和Delta左右对齐，通过Font Awesome图标区分增减，颜色直观显示正负，样式可以根据你的需求随意调整。

如果想更省心，推荐用shinydashboardPlus扩展包，它的valueBoxPlus组件直接内置了Delta参数，不需要自己写CSS：

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPage(
  dashboardHeader(title = "shinydashboardPlus Delta示例"),
  dashboardSidebar(),
  dashboardBody(
    valueBoxPlus(
      value = "12,500",
      subtitle = "月度销售额",
      icon = icon("dollar-sign"),
      color = "blue",
      # 直接配置Delta相关参数
      delta = "+12.5%",
      delta_icon = "fa-arrow-up",
      delta_color = "green"
    ),
    
    valueBoxPlus(
      value = "890",
      subtitle = "客户投诉量",
      icon = icon("exclamation-triangle"),
      color = "yellow",
      delta = "-3.2%",
      delta_icon = "fa-arrow-down",
      delta_color = "red"
    )
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

这个方案代码更简洁，组件自带的样式已经很美观，适合快速开发仪表盘。

如果你的Delta值需要根据实时数据计算，可以在Server端用renderUI动态生成ValueBox：

# 在Server中添加
output$dynamicSalesBox <- renderUI({
  # 模拟从数据源获取当前和往期数据
  current_sales <- 12500
  prev_sales <- 11111
  
  # 计算差值百分比
  delta_pct <- round(((current_sales - prev_sales)/prev_sales)*100, 1)
  delta_sign <- ifelse(delta_pct > 0, "+", "")
  delta_color <- ifelse(delta_pct > 0, "green", "red")
  delta_icon <- ifelse(delta_pct > 0, "fa-arrow-up", "fa-arrow-down")
  
  valueBoxPlus(
    value = format(current_sales, big.mark = ","),
    subtitle = "月度销售额",
    icon = icon("dollar-sign"),
    color = "blue",
    delta = paste0(delta_sign, delta_pct, "%"),
    delta_icon = delta_icon,
    delta_color = delta_color
  )
})

# 在UI中引用
dashboardBody(
  uiOutput("dynamicSalesBox")
)

这样就能根据数据自动调整Delta的符号、颜色和数值啦！

内容的提问来源于stack exchange，提问作者Davit