reactable如何在数值向量列中插入非数值文本替换0%进度条
你只需要修改Valor列的自定义渲染逻辑,在格式化数值前先判断原始值是否为0,符合条件则直接返回文本nd,否则正常渲染带进度条的百分比即可,修改后的完整代码如下:
library(dplyr) library(reactable) library(htmltools) # 构造表格数据 Objetivo_1 <- data.frame( Estrategia = c("1.1", "1.2", "1.3", "1.4", "1.5", "1.6"), `Nombre del indicador` = c("Porcentaje de indicadores de la estrategia 1.1 que cumplen con la tendencia esperada entre el periodo actual y el periodo inmediato anterior", "Porcentaje de indicadores de la estrategia 1.2 que cumplen con la tendencia esperada entre el periodo actual y el periodo inmediato anterior", "Porcentaje de indicadores de la estrategia 1.3 que cumplen con la tendencia esperada entre el periodo actual y el periodo inmediato anterior", "Porcentaje de indicadores de la estrategia 1.4 que cumplen con la tendencia esperada entre el periodo actual y el periodo inmediato anterior", "Porcentaje de indicadores de la estrategia 1.5 que cumplen con la tendencia esperada entre el periodo actual y el periodo inmediato anterior", "Porcentaje de indicadores de la estrategia 1.6 que cumplen con la tendencia esperada entre el periodo actual y el periodo inmediato anterior" ), Valor = round(c(0.111,0.4111,0.25,0,0.2,432), digits = 2), `Método de cálculo` = c("Número de indicadores que cumplen/Total de indicadores de la estrategia 1.1", "Número de indicadores que cumplen/Total de indicadores de la estrategia 1.2", "Número de indicadores que cumplen/Total de indicadores de la estrategia 1.3", "Número de indicadores que cumplen/Total de indicadores de la estrategia 1.4", "Número de indicadores que cumplen/Total de indicadores de la estrategia 1.5", "Número de indicadores que cumplen/Total de indicadores de la estrategia 1.6")) # 进度条渲染函数 bar_chart <- function(label, width = "100%", height = "14px", fill = "#00bfc4", background = NULL) { bar <- div(style = list(background = fill, width = width, height = height)) chart <- div(style = list(flexGrow = 1, marginLeft = "6px", background = background), bar) div(style = list(display = "flex", alignItems = "center"), label, chart) } ### 生成表格 reactable( Objetivo_1, bordered = TRUE, searchable = TRUE, language = reactableLang( searchPlaceholder = "Busqueda", noData = "Sin coincidencias", pageInfo = "{rowStart} a {rowEnd} de {rows} entries", pagePrevious = "❮", pageNext = "❯", # 屏幕阅读器等辅助技术的可访问标签,默认已配置,修改可见文本时同步更新即可 pagePreviousLabel = "Página anterior", pageNextLabel = "Siguiente página" ), defaultSorted = "Valor", columns = list( Nombre.del.indicador = colDef( name = "Nombre del indicador" ), Método.de.cálculo = colDef( name = "Método de cálculo" ), Valor = colDef( name = " Valor", defaultSortOrder = "desc", # 自定义单元格渲染逻辑 cell = function(value) { # 数值为0时直接返回nd文本 if (value == 0) { return("nd") } # 非0值格式化为百分比并渲染进度条 label <- paste0(format(value * 100, nsmall = 1), "%") bar_chart(label, width = label, fill = "#822b2b", background = "#e1e1e1") }, align = "left" ) ) )
如果需要覆盖更多异常值场景,比如小于0的数值也显示nd,把判断条件改成if (value <= 0)即可。
内容的提问来源于stack exchange,提问作者Jorge Hernández
相关产品推荐
相关产品推荐

