如何在可反应条形图中绘制负值？

Question

我在 reactable table 中显示负条形图时遇到了一些困难。我在下面有示例代码，如您所见，绘制了我的正值，但没有绘制负值。我坚持我所缺少的，所以任何帮助将不胜感激。

谢谢。

library(tidyverse)
library(htmltools)
library(reactable)

bar_chart_pos_neg <- function(label, value, height = "16px",
                              pos_fill = "green", neg_fill = "red") {
  pos_chart <- div(style = list(flex = "1 1 0"))
  neg_chart <- div(style = list(flex = "1 1 0"))
  width <- value
  
  if (value < 0) {
    bar <- div(style = list(marginLeft = "8px", background = neg_fill, width = width, height = height))
    chart <- div(style = list(display = "flex", alignItems = "center", justifyContent = "flex-end"), label, bar)
    neg_chart <- tagAppendChild(neg_chart, chart)
  } else {
    bar <- div(style = list(marginRight = "8px", background = pos_fill, width = width, height = height))
    chart <- div(style = list(display = "flex", alignItems = "center"), bar, label)
    pos_chart <- tagAppendChild(pos_chart, chart)
  }
  
  div(style = list(display = "flex"), neg_chart, pos_chart)
}

data <- data.frame(
  Spread = c(3.8741435, -10.7573310, 6.8234219, 10.1194614, 3.6772631,
             -4.2870001, 4.9933226, 2.6914581, -7.0133144, 4.9004934,
             -8.6499655, -1.4826557, -0.2060462, 0.3289249, -2.1613399,
             -4.5594886)
)

reactable(data, bordered = TRUE, columns = list(
  Spread = colDef(
    name = "Spread",
    cell = function(value) {
      label <- paste0(round(value), " pts")
      bar_chart_pos_neg(label, value)
    },
    align = "center",
    minWidth = 400
  )
))

Answer 1

宽度的值应该是正数。

width <- abs(value)

如何在可反应条形图中绘制负值？

How to get negative values plotted in reactable bar chart?

r

reactable