如何更改 Valuebox 中图标的颜色（flexdashboard）

Question

我正在 Rmd Flexdashboard（不是 Shiny）中创建 KPI，并希望根据规则更改 Valuebox 中图标的颜色：

• 如果值大于 0，则绿色箭头向上
• 如果值小于 0 红色向下箭头

我已经弄清楚了规则，但我不知道如何更改颜色（tags$i 不起作用）。非常感谢任何帮助。

valueBox(rule,  
         "Title + subtitle",
         icon = ifelse(rule >= 0, "fa-angle-up", "fa-angle-down"),
         color = "white")

Answer 1

迟到的答案，以防你还没有弄清楚：

您可以使用 css 更改颜色。创建一个 .css 文件。您可能必须将其保存在同一目录中名为 www 的文件夹中。更多信息在这里：https://shiny.rstudio.com/articles/css.html。我在我的例子中做到了这一点。 如果您右键单击箭头并选择inspect element，您将找到您所追求的样式的名称。在那里你可以测试不同的颜色。

您可以在上图中看到您所追求的样式称为.value-box .icon i。在图像的右上角，您会看到图标的类型。然后你将这个样式和你选择的颜色添加到你新创建的 .css 中，如下所示：

/*arrow down*/
.value-box .icon i.fa.fa-angle-down{
    
    color: rgb(255, 0, 0); /*red*/
  
}
 
/*arrow up*/    
.value-box .icon i.fa.fa-angle-up{
  
    color: rgb(0, 153, 0); /*green*/
  
}

在标题中添加 .css 文件的路径：

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    css: www/styles.css 

---

结果如下：

#arrow down
library(flexdashboard)
rule = -3
valueBox(rule,  
         "Title + subtitle",
         icon = ifelse(rule >= 0, "fa-angle-up", "fa-angle-down"),
         color = "white")

向上箭头：

library(flexdashboard)
rule = 3
valueBox(rule,  
         "Title + subtitle",
         icon = ifelse(rule >= 0, "fa-angle-up", "fa-angle-down"),
         color = "white")

Answer 2

这是一个简单的shiny 应用程序，正值显示绿色向上箭头，否则显示红色向下箭头。

color = "white" 出现错误，因此我使用color = "black" 作为valueBox 的颜色。

library(shinydashboard)
library(shiny)

rule <- -100

up <- tags$i(
  class = "fa fa-angle-up", 
  style = "color: green"
)

down <- tags$i(
  class = "fa fa-angle-down", 
  style = "color: red"
)
ui <- dashboardPage(
  dashboardHeader(title = "Value boxes"),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      # A static valueBox
      valueBox(rule, 
               "Title + subtitle", 
               icon = if(rule > 0) up else down, 
               color = 'black')
      ),
    )
)

server <- function(input, output) {
}

shinyApp(ui, server)

正值：

rule <- 100