R 使用 JavaScript 自定义 DT 表答案

【问题标题】：R Using JavaScript to customize DT tablesR 使用 JavaScript 自定义 DT 表
【发布时间】：2020-02-06 08:49:25
【问题描述】：

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

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

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

示例数据：

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

【问题讨论】：

您的意思是要添加百分号并以一位数四舍五入？

标签： javascript r dt

【解决方案1】：

要将数字更改为百分比，我们只需将数字乘以 100。要将其四舍五入到小数点后 1 位，我们可以使用 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]);",
                                 "}",
                                  '}',
                                  "}")
                              )
)

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

【讨论】：