如何修复具有堆叠百分比的条形图的悬停功能上的比较数据？

Question

我有一个图表，需要显示一组与另一组的百分比。我的图表正是我想要的，但我无法让工具提示按我想要的方式运行。

我的默认设置为hovermode = y，这基本上是当我在模式栏中选择“比较悬停数据”时想要显示的内容。 “悬停时最接近的数据”效果很好。当我选择比较数据时，它完全精神错乱，从整个绘图中选择随机值，似乎没有押韵或理由（尽管我确信一定有一个模式/解释）。

我希望用户能够在最接近和比较之间来回切换，因为如果我只是删除比较并将默认值设置为 y，它不会让用户在从最接近的选项中选择最接近的之后返回到初始悬停模式模式栏。

这是我的代码。任何帮助将不胜感激。

dat <- data.frame(group1=(rep(letters[1:4], each=5)), 
           group2=rep(LETTERS[1:5], times=4),
           pct = c(rep(.2, times=5), 
                   c(.1, .1, .1, .3, .4), 
                   c(.2, .2, .2, .3, .1),
                   c(.3, .1, .2, .2, .2))
           )
dat %>%
  plot_ly() %>%
  add_bars(x=~pct, y=~group1,  color=~group2,
           customdata = ~group2,
           hovertemplate = paste0(
             "%{y:.2f%}<br>",
             "<extra>%{customdata}</extra>"
             )
           ) %>% 
      layout(yaxis = list(title = 'Group 1', 
                          autorange='reversed', 
                          categoryorder='trace'),
             xaxis = list(title = 'Percent', tickformat = ".0%"),
             barmode = 'stack', 
             hovermode = 'y',

             legend = list(traceorder = "normal")) %>%
      config(displaylogo = FALSE
             #,modeBarButtonsToRemove = list('hoverCompareCartesian'
             )

Answer 1

根据图形设置，标准模式栏中的两种模式是

closest

和

y

(<- that's

compare

)。但是，当您选择

closest

并随后选择

y

时，Plotly 会将

hovermode

更改为

x

。

在对

onRender

的调用中，每次悬停时，都会验证绘图悬停模式。如果悬停模式既不是

closest

，也不是

y

，则会将其更改回

y

。

你的情节没有改变。这使用了库

htmlwidgets

。

dat %>%
  plot_ly() %>%
  add_bars(x = ~pct, y = ~group1,  color = ~group2,
           split = ~group2, customdata = ~group2,
           hovertemplate = paste0("%{y:.2f%}<br>", "<extra>%{customdata}</extra>")) %>% 
  layout(yaxis = list(title = 'Group 1', autorange = 'reversed', categoryorder = 'trace'),
         xaxis = list(title = 'Percent', tickformat = ".0%"),
         barmode = 'stack', hovermode = 'y', legend = list(traceorder = "normal")) %>%
  config(displaylogo = FALSE) %>% 
  htmlwidgets::onRender(         # <---- I'm new!
    "function(el, x) {
      el.on('plotly_hover', function(d) {   /* when hovering, check hovermode */
        if (el.layout.hovermode !== 'closest' && el.layout.hovermode !== 'y') {
          Plotly.relayout(el.id, {hovermode: 'y'}) /* fix hovermode, if needed */
        }
      });
    }")