在闪亮的反应计时器无效时，随着文本值的变化，更改文本输出的颜色

Question

我正在创建金融股票的仪表板。我有一个盒子，上面写着股票价格。股票价格每分钟都在变化。我想要的是随着股票价格的变化，颜色应该短暂变化以反映变化的类型。例如，如果最后的价格低于之前的最后价格，我希望文本的颜色在变化时闪烁红色，但返回到默认颜色，即黑色。这与 Google 财经上价格变化时发生的情况类似（例如，请参阅 jse:npn 的 google 搜索结果）

这是我的代码的最精简版本。

library(quantmod)

library(shiny)

library(shinydashboard)

library(shinydashboardPlus)

library(shinyWidgets)

ui <- dashboardPage(

  dashboardHeader(title = "Example"),

  dashboardSidebar(

    sidebarMenu(

      ID = "tabs",

      menuItem(text = "Naspers", tabName = "tabNaspers", icon = icon("chart-line"))

    )

  ),

  dashboardBody(

    tags$head(tags$style(HTML('.fas { font-size: 36px; }

                          .fas {

                            vertical-align: middle;

                          }

                          #'

              ))),

    tabItems(

      tabItem(tabName = "tabNaspers",

              fluidRow(

                column(

                  width = 7,

                  boxPlus(title = span("ALL SHARE", style = "color: rgb(128,128,128); font-size: 22px"),

                          collapsible = TRUE,

                          closable = FALSE,

                          enable_dropdown = TRUE,

                          dropdown_icon = "NULL",

                          status = 'success',

                          valueBoxOutput('npn_price', 12),

                          valueBoxOutput('npn_day_change', 12),

                          width = 4

                  )

                )

              )        

      )

    )

  )

)

npn_close <- 203059.00

server <- function(input, output, session){

    autoInvalidate <- reactiveTimer(intervalMs = 60000)

    output$npn_price <- renderUI({

      autoInvalidate()

    })

Answer 1

当然。总之，我们存储价格，获取新的价格，如果价格下降，则使文本变为红色，然后我们快速再次运行以产生闪光效果。为了进行测试，我添加了按钮来模拟价格的上涨和下跌。我还让它更频繁地检查更改。可以在这一行更改闪光长度：invalidateLater(1200)。library(quantmod)library(shiny)library(shinydashboard)library(shinydashboardPlus)library(shinyWidgets)ui <- dashboardPage(&nbsp; &nbsp; dashboardHeader(title = "Example"),&nbsp; &nbsp; dashboardSidebar(&nbsp; &nbsp; &nbsp; &nbsp; sidebarMenu(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ID = "tabs",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; menuItem(text = "Naspers", tabName = "tabNaspers", icon = icon("chart-line"))&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; ),&nbsp; &nbsp; dashboardBody(&nbsp; &nbsp; &nbsp; &nbsp; tags$head(tags$style(HTML('.fas { font-size: 36px; }.fas {vertical-align: middle;} #'))),&nbsp; &nbsp; &nbsp; &nbsp; tabItems(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tabItem(tabName = "tabNaspers",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fluidRow(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; column(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width = 7,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; boxPlus(title = span("ALL SHARE", style = "color: rgb(128,128,128); font-size: 22px"),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; collapsible = TRUE,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; closable = FALSE,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enable_dropdown = TRUE,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dropdown_icon = "NULL",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; status = 'success',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; valueBoxOutput('npn_price', 12),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; valueBoxOutput('npn_day_change', 12),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width = 4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #Buttons to simulate stock going up, so that we don't have to wait for the stock to actually go up or down&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; actionButton('btn_stockgoesup',&nbsp; &nbsp;'Simulate Stock Going Up'),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; actionButton('btn_stockgoesdown', 'Simulate Stock Going Down')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; ))npn_close <- 203059.00server <- function(input, output, session){&nbsp; &nbsp; autoInvalidate <- reactiveTimer(intervalMs = 6000)&nbsp; &nbsp; #Buttons to simulate stock going up, so that we don't have to wait for the stock to actually go up or down&nbsp; &nbsp; observeEvent(input$btn_stockgoesup,&nbsp; &nbsp;{npn_last_stored <<- 0&nbsp; ;&nbsp; print('At the next update the stock will simulate going up')})&nbsp; &nbsp; observeEvent(input$btn_stockgoesdown, {npn_last_stored <<- Inf;&nbsp; print('At the next update the stock will simulate going down')})&nbsp; &nbsp; output$npn_price <- renderUI({&nbsp; &nbsp; &nbsp; &nbsp; autoInvalidate()&nbsp; &nbsp; &nbsp; &nbsp; npn_last <- getQuote("NPN.JO", what=yahooQF("Last Trade (Price Only)"))[, 2]&nbsp; &nbsp; &nbsp; &nbsp; #Handle when app first starts and there is no stored value to compare against&nbsp; &nbsp; &nbsp; &nbsp; if(exists('npn_last_stored') == FALSE) {npn_last_stored <<- npn_last}&nbsp; &nbsp; &nbsp; &nbsp; if(npn_last < npn_last_stored) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #Stock went down&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print('stock went down')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; npn_color <- 'rgb(220, 50, 20)'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; invalidateLater(1200)&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #Stock went up / not changed&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print('stock went up / not changed')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; npn_color <- 'rgb(0, 0, 0)'&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #Update stored value&nbsp; &nbsp; &nbsp; &nbsp; npn_last_stored <<- npn_last&nbsp; &nbsp; &nbsp; &nbsp; npn_change <- round((npn_last - npn_close) / npn_close, 4) * 100&nbsp; &nbsp; &nbsp; &nbsp; arrow_color <- ifelse(npn_change > 0, 'rgb(15, 157, 88)' ,'rgb(226, 74, 26)')&nbsp; &nbsp; &nbsp; &nbsp; npn_diff <- npn_last - npn_close&nbsp; &nbsp; &nbsp; &nbsp; npn_diff <- ifelse(npn_diff < 0, paste0('-', npn_diff), paste0('+', npn_diff))&nbsp; &nbsp; &nbsp; &nbsp; tags$div(HTML(paste0('<span style="color:', npn_color, '; font-size: 24px"><strong>', npn_last, '</strong></span>', '<span style="color:', arrow_color, '; font-size: 14px">', npn_diff, '</span>')))&nbsp; &nbsp; })&nbsp; &nbsp; output$npn_day_change <- renderUI({&nbsp; &nbsp; &nbsp; &nbsp; autoInvalidate()&nbsp; &nbsp; &nbsp; &nbsp; npn_last <- getQuote("NPN.JO", what=yahooQF("Last Trade (Price Only)"))[, 2]&nbsp; &nbsp; &nbsp; &nbsp; npn_change <- round((npn_last - npn_close) / npn_close, 4) * 100&nbsp; &nbsp; &nbsp; &nbsp; npn_change <- paste0(npn_change, "%")&nbsp; &nbsp; &nbsp; &nbsp; arrow_color <- ifelse(npn_change > 0, 'rgb(15, 157, 88)' ,'rgb(226, 74, 26)')&nbsp; &nbsp; &nbsp; &nbsp; arrow_icon <- ifelse(npn_change < 0, '"fas fa-caret-down"', '"fas fa-caret-up"')&nbsp; &nbsp; &nbsp; &nbsp; tags$div(HTML(paste0('<i class=', arrow_icon, ' style = "color:', arrow_color,';"></i><span style="color:', arrow_color,'; font-size: 24px"><strong>',npn_change, '</strong></span>')))&nbsp; &nbsp; })}shinyApp(ui, server)