Plotly R：根據不同的欄更改hoverinfo字體顏色 colors

Question

我有這個 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 ，如這些圖像所示：黑色，較淺，白色，較深

這里有什么提示嗎？

Answer 1

可能有比這更簡單的方法，但這很有效。 除了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