R 使用 JavaScript 自定义 DT 表

Question

我之前曾询问过如何根据存储在隐藏列中的颜色为单元格着色 () and how to get information when hovering a cell ()。我也想同时做一些格式化。

我想在我想要的地方扩展我最初的帖子：

根据数据框中指定的颜色添加颜色
添加悬停选项以显示与单个单元格相关的样本大小（也在数据框中）。
对指定列应用数字格式

示例数据：

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

Answer 1

要将数字更改为百分比，我们可以将数字乘以 100。要将其四舍五入到小数点后一位，我们可以使用 js 函数 toFixed(1) 然后我们可以使用 [=12 添加百分号=].要保留您的初始格式并添加新的更改，如下所示： "$('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]);",
                                 "}",
                                  '}',
                                  "}")
                              )
)

通过此更改，您获得的输出是：

R 使用 JavaScript 自定义 DT 表

R Using JavaScript to customize DT tables

javascript

r

dt