R 使用JavaScript自定义DT表

我之前问过如何根据隐藏列中存储的颜色为单元格着色（link https://stackoverflow.com/questions/56105725/dt-apply-background-colour-to-cell-based-on-separate-data-frame）以及如何在悬停单元格时获取信息（link https://stackoverflow.com/questions/57155336/dt-cell-hover-showing-cell-based-sample-sizes-from-hidden-column）。我还想同时进行一些格式化。

我想扩展我最初的帖子：

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 列的解决方案？

要将数字更改为百分比，我们只需将数字乘以 100。要将其四舍五入到小数点后一位，我们可以使用 js 函数toFixed(1)然后我们可以使用添加百分号+ %。要保留初始格式并添加新的更改，如下所示： "$('td:eq('+i+')', nRow).attr('title', full_text).css('background-color', 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]);",
                                 "}",
                                  '}',
                                  "}")
                              )
)

With this change the output you get is: