R Shiny 中的渐变色数据表行
Gradient colored datatable rows in R Shiny
我想知道我们是否可以在 R Shiny 中做到这一点
example
# using styleColorBar
datatable(df) %>% formatStyle(names(df),
background = styleColorBar(range(df), 'lightblue'),
backgroundSize = '98% 88%',
backgroundRepeat = 'no-repeat',
backgroundPosition = 'center')
但是有两种颜色表示正值和负值,此外,如果我们可以这样做,负值将被视为条形长度的绝对值
Ty,祝你有美好的一天!
您可以使用 rowCallback
手动完成
如你所见
sss=datatable(df) %>% formatStyle(names(df),
background = styleColorBar(range(df), 'lightblue'),
backgroundSize = '98% 88%',
backgroundRepeat = 'no-repeat',
backgroundPosition = 'center')
sss$x$options$rowCallback
为每一列生成:
function(row, data) { var value=data[ 1]; if (value!==null)
$(this.api().cell(row,
1).node()).css({'background':isNaN(parseFloat(value)) || value <=
-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"),
"}"))
)
)
这里我硬编码颜色(红色和浅蓝色)
结果
如果你想要正数和负数的不同长度,你需要不同的范围变量或使用 abs
\ Math.abs
- 绝对值(对于 JS 中的 var 和范围)
Ps
JS 中列的编号从 0 开始,因此如果您没有行名,则需要 0:(ncol(df)-1)
in lapply
以获得正确的结果
更新
绝对值的范围 -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"),
"}"))
)
)
我想知道我们是否可以在 R Shiny 中做到这一点 example
# using styleColorBar
datatable(df) %>% formatStyle(names(df),
background = styleColorBar(range(df), 'lightblue'),
backgroundSize = '98% 88%',
backgroundRepeat = 'no-repeat',
backgroundPosition = 'center')
但是有两种颜色表示正值和负值,此外,如果我们可以这样做,负值将被视为条形长度的绝对值
Ty,祝你有美好的一天!
您可以使用 rowCallback
如你所见
sss=datatable(df) %>% formatStyle(names(df),
background = styleColorBar(range(df), 'lightblue'),
backgroundSize = '98% 88%',
backgroundRepeat = 'no-repeat',
backgroundPosition = 'center')
sss$x$options$rowCallback
为每一列生成:
function(row, data) { var value=data[ 1]; if (value!==null) $(this.api().cell(row, 1).node()).css({'background':isNaN(parseFloat(value)) || value <= -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"),
"}"))
)
)
这里我硬编码颜色(红色和浅蓝色)
结果
如果你想要正数和负数的不同长度,你需要不同的范围变量或使用 abs
\ Math.abs
- 绝对值(对于 JS 中的 var 和范围)
Ps
JS 中列的编号从 0 开始,因此如果您没有行名,则需要 0:(ncol(df)-1)
in lapply
以获得正确的结果
更新
绝对值的范围 -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"),
"}"))
)
)