[英]Plotly R: change hoverinfo font color according to different bar colors
我有这个 dataframe:
df2 = data.frame(value = c(9, 2, 7, 3, 6),
key = c('ar', 'or', 'br', 'gt', 'ko'))
这是我必须生成的代码plot
df2 %>%
plot_ly(x = ~key,
y = ~value,
type = 'bar',
color = ~value,
colors = c(rgb(0, 0, 0, 1), rgb(1, 0.85, 0.85, 1)),
stroke = I('black'),
span = I(1),
hoverinfo = 'text',
hovertext = ~paste0('value: ', value,
'\nkey: ', key)
) %>%
layout(hoverlabel = list(bordercolor = 'transparent',
font = list(family = 'DM Sans',
size = 15,
color = 'white')))
但是,如上所示,当悬停在较浅的颜色上时, hoverinfo
的font color
为白色。
基本上,我想black when the color is lighter
, white when the color is dark
,如这些图像所示:黑色,较浅,白色,较深
这里有什么提示吗?
可能有比这更简单的方法,但这很有效。 除了plotly
htmlwidgets
我已经将文本颜色的变化写为一个事件,因为替代方案是五个单独的痕迹,就像您在问题中所避开的那样。
在 JS 中,我有一个 if–else 语句,它查询pointerNumber
。 指针编号是标记、条、线的数量,无论您在 plot 上有什么。在这种情况下,它是条。
指针数字总是从零开始并且是连续的数字——不要假设顺序与可视化相匹配。 (我认为它遵循提供数据的顺序,但我从来没有觉得有必要调查它,所以我不是 100% 的。)
在此代码中,我将指针编号 0 更改为黑色文本(即浅粉色文本)。 如果你觉得br
栏也应该有黑色文本,你可以修改if(pn === 0){
到if(pn === 0 || pn === 2) {
现在粉红色旁边的栏一个也会有黑色文本。 (指针编号 1 恰好是最右侧的列。)
事件代码:
hoverer = "function(el, x) {
el.on('plotly_hover', function(d){
var pn = d.points[0].pointNumber;
var fon = [];
var hov = [];
if(pn === 0){
col = 'black';
} else {
col = 'white'};
fon = {
'family': 'DM Sans',
'size': 15,
'color': col};
hov = {
'bordercolor': 'transparent',
'font': fon};
h = {hoverlabel: hov};
Plotly.restyle(el.id, h);
});}"
这就是你如何将它与你的图表一起使用:
df2 %>%
plot_ly(x = ~key,
y = ~value,
type = 'bar',
color = ~value,
colors = c(rgb(0, 0, 0, 1), rgb(1, 0.85, 0.85, 1)),
stroke = I('black'),
span = I(1),
hoverinfo = 'text',
hovertext = ~paste0('value: ', value,
'\nkey: ', key)) %>%
layout(hoverlabel = list(bordercolor = 'transparent',
font = list(family = 'DM Sans',
size = 15,
color = 'white'))) %>%
htmlwidgets::onRender(hoverer) # this will trigger the event driven code
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.