Plotly R:根据不同的条形颜色更改 hoverinfo 字体颜色

Plotly R: change hoverinfo font color according to different bar colors

我有这个数据框:

df2 = data.frame(value = c(9, 2, 7, 3, 6),
                 key = c('ar', 'or', 'br', 'gt', 'ko'))

这是我必须生成的代码 this 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')))

但是,如上所示,hoverinfofont color 悬停在较浅的颜色上时是 白色

基本上,我想将字体颜色设置为 black when the color is lighterwhite when the color is dark,如这些图像所示:black, when lighter, and white, when darker

这里有什么提示吗?

可能有比这更简单的方法,但这个方法有效。除了 plotly.

,我还使用了包 htmlwidgets

我已经将文本颜色的变化写为一个事件,因为替代方案是五个单独的痕迹,就像您在问题中所避开的那样。

在 JS 中,我有一个 if–else 语句,它查询 pointerNumber。指针编号是标记、条形、线条的数量,无论您在绘图上有什么。在这种情况下,它是酒吧。

指针数字总是从零开始并且是连续的数字——不要假设顺序与可视化相匹配。 (我认为它遵循提供数据的顺序,但我从未觉得有必要对其进行调查,所以我不是 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