Градиент цветные DataTable строки в R Shiny

Question

мне было интересно, если бы мы могли сделать это в R Shiny example

# using styleColorBar 
datatable(df) %>% formatStyle(names(df), 
    background = styleColorBar(range(df), 'lightblue'), 
    backgroundSize = '98% 88%', 
    backgroundRepeat = 'no-repeat', 
    backgroundPosition = 'center') 

Но с двумя цветами для положительных и отрицательных значений и, кроме того, если мы можем сделать поэтому отрицательные значения принимаются как абсолютные значения для длины стержня

Ty и хорошо провести день!

Answer 1

Вы можете сделать это вручную с помощью rowCallback

как вы можете видеть

sss=datatable(df) %>% formatStyle(names(df), 
           background = styleColorBar(range(df), 'lightblue'), 
           backgroundSize = '98% 88%', 
           backgroundRepeat = 'no-repeat', 
           backgroundPosition = 'center') 


sss$x$options$rowCallback 

Сформировать для каждого столбца:

функции (строка, данные) {значение вар = данные [1 ]; if (value! == null) $ (this.api(). cell (row, 1) .node()). css ({'background': isNaN (parseFloat (значение)) || значение < = -1.311? '': 'Linear-gradient (90deg, transparent' + (2.199 - value) /3.51 * 100 + '%, lightblue' + (2.199 - value) /3.51 * 100 + '%)', 'background -size ':' 98% 88% ',' background-repeat ':' no-repeat ',' background-position ':' center '});

Итак:

1) Вы должны известково переменные диапазона:

rr=range(df)[2]-range(df)[1] 
r1=range(df)[2] 
r0=range(df)[1] 

2) Чем использовать его в rowCallback

datatable(
    df, 
    options = list(
     rowCallback=JS(paste0("function(row, data) {", 
           paste(lapply(1:ncol(df),function(i){ 
           paste0("var value=data[",i,"]; 
             if (value!==null){ 
             if(value<0){ 
             $(this.api().cell(row,",i,").node()).css({'background':isNaN(parseFloat(value)) || value <=",r0," ? '' : 'linear-gradient(90deg, transparent ' + (",r1," - value)/",rr," * 100 + '%, red ' + (",r1," - value)/",rr," * 100 + '%)','background-size':'98% 88%','background-repeat':'no-repeat','background-position':'center'}); 
             }else{ 
             $(this.api().cell(row,",i,").node()).css({'background':isNaN(parseFloat(value)) || value <=",r0," ? '' : 'linear-gradient(90deg, transparent ' + (",r1," - value)/",rr," * 100 + '%, lightblue ' + (",r1," - value)/",rr," * 100 + '%)','background-size':'98% 88%','background-repeat':'no-repeat','background-position':'center'}); 
             } 
             } ") 
}),collapse="\n"), 
"}")) 
) 
) 

Здесь я трудно закодированы цвета (красный и lightblue)

Если вы хотите различную длину для положительных и отрицательных вам нужно другие переменного диапазона или с помощью abs \ Math.abs - для абсолютного значения (для вара в JS и для диапазонов)

Ps

нумерацию для колонн в JS начинается с 0, так что если у вас нету rownames нужно 0:(ncol(df)-1) в lapply для правильного результата

Update

диапазоне от -1: 1 и цветовая гамма для значения абс

df = as.data.frame(cbind(matrix(round(runif(50, -1, 1), 3), 10), sample(0:1, 10, TRUE))) 


rr=range(abs(df))[2]-range(abs(df))[1] 
r1=range(abs(df))[2] 
r0=range(abs(df))[1] 



datatable(
    df, 
    options = list(
     rowCallback=JS(paste0("function(row, data) {", 
           paste(lapply(1:ncol(df),function(i){ 
           paste0("var value=Math.abs(data[",i,"]); 
             var value2=data[",i,"]; 
             if (value!==null){ 
             if(value2<0){ 
             $(this.api().cell(row,",i,").node()).css({'background':isNaN(parseFloat(value)) || value <=",r0," ? '' : 'linear-gradient(90deg, transparent ' + (",r1," - value)/",rr," * 100 + '%, red ' + (",r1," - value)/",rr," * 100 + '%)','background-size':'98% 88%','background-repeat':'no-repeat','background-position':'center'}); 
             }else{ 
             $(this.api().cell(row,",i,").node()).css({'background':isNaN(parseFloat(value)) || value <=",r0," ? '' : 'linear-gradient(90deg, transparent ' + (",r1," - value)/",rr," * 100 + '%, lightblue ' + (",r1," - value)/",rr," * 100 + '%)','background-size':'98% 88%','background-repeat':'no-repeat','background-position':'center'}); 
             } 
             } ") 
}),collapse="\n"), 
"}")) 
) 
)