javascript - R 使用JavaScript自定义DT表

Question

我之前曾询问过如何根据隐藏列 ( link ) 中存储的颜色为单元格着色，以及如何在悬停单元格时获取信息 ( link )。我还想同时进行一些格式化。

我想将我最初的帖子扩展到我想要的地方:

1. 根据数据框中指定的颜色添加颜色
2. 添加悬停选项以显示与各个单元格相关的样本大小(也在数据框中)。
3. 将数字格式应用于指定列

示例数据:

dat <- iris[1:5,1:5]
colours2apply <- sample(x=c(rgb(1, 0, 0 ), rgb(1, 1, 0 ), rgb(0, 1, 1 )), 25, replace = T) %>% 
  matrix(nrow=5) %>% 
  data.frame()
set.seed(1234)
SampleSizesToShowInHover <- matrix(round(runif(n = 25, 10, 1000)), nrow=5)

  dat <- cbind(dat, colours2apply)
  dat <- cbind(dat, SampleSizesToShowInHover)
dat

同时执行1和2的最终解决方案是:

library(DT)
solution12 <- DT::datatable(dat, 
                options = 
                  list(
                    columnDefs = list(
                      list(
                        visible=FALSE, 
                        targets = 6:15
                      )
                    ), 
                    rowCallback = JS(
                      "function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
                      'for(i=0; i<5; i++ ){',
                      "var full_text = 'n = '+ aData[i+10];",
                      "$('td:eq('+i+')', nRow).attr('title', full_text).css('background-color', aData[i+5]);",
                      '}',
                      "}")
                    
                    
                  )
)
solution12

如何集成 JavaScript，以便将第 3 列和第 4 列中的数据显示为保留 1 位小数的百分比，同时保留第 1 和第 2 列的解决方案？

Answer 1

要将数字更改为百分比，我们只需将数字乘以 100。要将其四舍五入到小数点后一位，我们可以使用 js 函数 toFixed(1)，然后我们只需添加百分号即可使用+%。要保留初始格式并添加新的更改，如下所示: "$('td:eq('+i+')', nRow).attr('标题', full_text).css('背景颜色', aData[i+5]).html((aData [i]*100).toFixed(1)+ '%');",

将其添加到第 3 列和第 4 列的代码更改如下:

  DT::datatable(dat, 
                            options = 
                              list(
                                columnDefs = list(
                                  list(
                                    visible=FALSE, 
                                    targets = 6:15
                                  )
                                ), 
                                rowCallback = JS(
                                  "function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
                                  'for(i=0; i<5; i++ ){',
                                  "var full_text = 'n = '+ aData[i+10];",
                                 "if(i === 3 || i=== 4) {",
                                 "$('td:eq('+i+')', nRow).attr('title', full_text).css('background-color', aData[i+5]).html((aData[i]*100).toFixed(1)+ '%');",
                                 "}",
                                 "else{",
                                 "$('td:eq('+i+')', nRow).attr('title', full_text).css('background-color', aData[i+5]);",
                                 "}",
                                  '}',
                                  "}")
                              )
)

通过此更改，您得到的输出是: