You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.05 07:21:03