如何更改 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

这是一个简单的 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

Answer 2

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

您可以使用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 文件的路径添加到 header 中：

---
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")

如何更改 Valuebox (flexdashboard) 中图标的颜色

How to change a color of an icon in Valuebox (flexdashboard)

r

r-markdown

flexdashboard