如何更改 Valuebox (flexdashboard) 中图标的颜色
How to change a color of an icon in Valuebox (flexdashboard)
我正在 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")
这是一个简单的 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
迟到的答案,以防你还没有弄清楚:
您可以使用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")
我正在 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")
这是一个简单的 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
迟到的答案,以防你还没有弄清楚:
您可以使用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")