如何在Flexdashboard中更改向上箭头（绿色）、向下箭头（红色）或破折号（黑色）的颜色？

Question

如何在Flexdashboard中更改向上箭头（绿色）、向下箭头（红色）或破折号（黑色）的颜色？

6

我有以下关于R中Flexdashboard的示例代码：

---
title: "My Dashboard"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
always_allow_html: yes
---

```{r init, include=FALSE, echo=FALSE}
gc()

```


```{r setup1, include = FALSE}
library(flexdashboard)
library(thematic)
library(ggplot2)
library(bslib)
library(shiny)
library(plotly)
library(tidyverse)
library(dplyr)
library(htmltools)

```


Home {data-icon="fa-home" .main}
=====================================   

```{r, include=FALSE}

theme_set(theme_bw(base_size = 20))

```


Row
-----------------------------------------------------------------------

### Heading 1

```{r}
valueBox(1, icon = "fa-pencil", color="success")
```

### Heading 2

```{r}

valueBox(2, icon = "fa-file-text-o", color="info")

```

### Heading 3

```{r}
valueBox(3, icon = "fa-database", color = "danger")
```

Row
-------------------------------------------



Screen 2 {data-icon="fa-signal"}
==========================================================================

Sidebar {.sidebar data-width=350}
-------------------------------------

<h3>Selection Area</h3>

```{r}

hr(style = "border-top: 1px solid #000000;")

sliderInput("contact_rate", "Set contact rate", value = 91, min = 0, max = 100)

hr()

numericInput(inputId="my_input", "Enter a number:", 4, min = 0)

actionButton("submit", "Submit")


```


Value Boxes 
-------------------------------------

### Primary

```{r}

observeEvent(input$submit, {
  arrow_icon_temp <- ifelse(input$my_input > 3, icon("fa-arrow-up", class = "text-success"), 
                            icon("fa-arrow-down", class = "text-danger"))
  output$arrow <- renderValueBox({
    valueBox(
      input$my_input, caption = "Days", 
      color = "white",
      icon = arrow_icon_temp
    )
  })
})


renderValueBox({
  valueBoxOutput("arrow")
})

```

### Info

```{r}

valueBox(2, caption = "Weeks", color = "red", icon = "fa-chart-line")

```

### Success

```{r}

valueBox(3, caption = "Weeks", color = "green", icon = "fa-chart-line")

```



Gauges 
-------------------------------------

### Success Rate

```{r}

renderGauge({
  gauge(input$contact_rate, min = 0, max = 100, symbol = '%', 
        sectors = gaugeSectors( danger = c(0, 20), warning = c(20, 80), success = c(80, 100)))
  })

```

### Warning metric

```{r}

renderGauge({
  gauge(input$contact_rate, min = 0, max = 100, symbol = '%', 
        sectors = gaugeSectors( danger = c(0, 20), warning = c(20, 80), success = c(80, 100)))
  })

```

### Danger!

```{r}

renderGauge({
  gauge(input$contact_rate, min = 0, max = 100, symbol = '%', 
        sectors = gaugeSectors( danger = c(0, 20), warning = c(20, 80), success = c(80, 100)))
  })


```

仪表板如下所示：

我试图通过响应式地改变值框中的向上箭头（绿色）或向下箭头（红色）或破折号（黑色），来实现当我在侧边栏的数值输入框中输入数字并点击提交按钮后，只有符合上述代码中应用的条件时，值框和箭头才会相应地改变（如图片所示）。

但是这里遇到了两个问题：

第一次启动仪表板（运行应用程序）时，需要提供输入数字，然后点击“提交”按钮，然后值框才会显示我刚刚输入的数字。
但是，第二次更改数字时，即使没有点击“提交”按钮，数字也会立即显示在值框中，这不应该发生。
箭头（红色、向下或绿色、向上）仍未被显示。

我在这里做错了什么？有什么建议吗？

- LeMarque

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Jorquera · Accepted Answer

首先，要格式化您的图标样式，您需要将以下这段css代码保存在一个名为styles.css的文件中，该文件应该位于您的www文件夹内：

     .value-box .icon i.fa.fa-arrow-up{
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 80px;
      color: rgba(0, 153, 0);
    }
    
    .value-box .icon i.fa.fa-arrow-down{
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 80px;
      color: rgba(255, 0, 0);
    }

记得在yaml文件中包含这个文件：

---
title: "My Dashboard"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
always_allow_html: yes
css: www/styles.css 
---

你需要打破你的renderValueBox对input$my_input的依赖关系，因为你只需要在点击input$submit时才渲染renderValueBox。这时候可以使用isolate函数：它可以暂停输入或反应对象内部的反应动作，并且只有当与其环境相关联的另一个输入或反应对象发生更改时才进行评估。所以通过一些修改，你的代码现在应该是这样的：

### Primary

```{r}

observeEvent(input$submit, {
  
  output$arrow <- renderValueBox({
    
    valueBox(
      ifelse(input$submit == 0, "Select number of days", isolate(input$my_input)), caption = "Days", 
      color = "white",
      icon = ifelse(isolate(input$my_input) > 3, "fa-arrow-up", "fa-arrow-down"))
    
  })
}, ignoreNULL = FALSE)


renderValueBox({
  valueBoxOutput("arrow")
})

编辑：回答：我是否也可以在显示的数字和箭头之间包含一个文本框，例如“错误：”？

这意味着需要将valueBox中的value参数更改为包括所需元素的shiny::tagList。这些元素需要在同一行中；在不同的列中。现在你的valueBox看起来像这样：

valueBox(
      value = tagList(tags$div(class = "parent",
                       tags$div(class = "column", ifelse(input$submit == 0, "Select number of days", isolate(input$my_input))),
                       tags$div(class = "column", tags$h5("Error:")))), 
      caption = "Days", 
      color = "white",
      icon = ifelse(isolate(input$my_input) > 3, "fa-arrow-up", "fa-arrow-down"))

而你的 styles.css 文件需要包含这些行：

.parent {
  display: flex;
  flex-direction:row;
}

.column {
  flex: 1 1 0px;
}