Plotly技术问题：Hover条形图时仅首条迹线触发图例变更

优先方案：让图例完全不随hover变更 #

问题根源是Plotly图例默认显示对应迹线第一个数据点的样式，原代码在hover第一个条形时会修改该点的边框，导致图例样式变化。要让图例保持初始状态，只需确保hover时不修改迹线第一个点的边框样式，同时处理鼠标离开时的样式恢复：

library(plotly)
library(htmlwidgets)
set.seed(29042025)
d <- expand.grid(a = LETTERS[1:3], b = letters[1:2])
d$c <- sample(10, 6)

plot_ly(d) %>%
  add_bars(x = ~ c, y = ~ a, color = ~ b) %>%
  onRender("function(el, x) {
    // 保存每个迹线的初始边框样式（第一个点对应图例）
    const initialLineStyles = x.data.map(trace => ({
      color: trace.marker?.line?.color || 'transparent',
      width: trace.marker?.line?.width || 0
    }));
    
    el.on('plotly_hover', function(data){
      const curveNum = data.points[0].curveNumber;
      const pos = data.points[0].pointNumber;
      
      // 构造边框样式数组：默认透明无宽度，仅hover点加边框
      const color = Array(3).fill('transparent');
      const width = Array(3).fill(0);
      color[pos] = 'black';
      width[pos] = 2;
      // 恢复第一个点的初始样式，确保图例不变
      color[0] = initialLineStyles[curveNum].color;
      width[0] = initialLineStyles[curveNum].width;
      
      Plotly.restyle(el, {'marker.line': null});
      Plotly.restyle(el, {
        'marker.line.color': [color], 
        'marker.line.width': [width]
      }, [curveNum]);
    });
    
    // 鼠标离开时恢复初始样式
    el.on('plotly_unhover', function(data){
      const curveNum = data.points[0].curveNumber;
      Plotly.restyle(el, {
        'marker.line.color': [initialLineStyles[curveNum].color], 
        'marker.line.width': [initialLineStyles[curveNum].width]
      }, [curveNum]);
    });
  }")

备选方案：hover任意条形时，对应图例同步添加边框 #

如果需要hover该迹线的任意条形时，图例都显示边框，只需在hover时同时修改该迹线第一个点（对应图例）的边框样式：

library(plotly)
library(htmlwidgets)
set.seed(29042025)
d <- expand.grid(a = LETTERS[1:3], b = letters[1:2])
d$c <- sample(10, 6)

plot_ly(d) %>%
  add_bars(x = ~ c, y = ~ a, color = ~ b) %>%
  onRender("function(el, x) {
    el.on('plotly_hover', function(data){
      const curveNum = data.points[0].curveNumber;
      const pos = data.points[0].pointNumber;
      
      const color = Array(3).fill('transparent');
      const width = Array(3).fill(0);
      // 给hover的条形和图例对应的第一个点都加边框
      color[pos] = 'black';
      width[pos] = 2;
      color[0] = 'black';
      width[0] = 2;
      
      Plotly.restyle(el, {'marker.line': null});
      Plotly.restyle(el, {
        'marker.line.color': [color], 
        'marker.line.width': [width]
      }, [curveNum]);
    });
    
    // 鼠标离开时移除所有边框
    el.on('plotly_unhover', function(data){
      const curveNum = data.points[0].curveNumber;
      Plotly.restyle(el, {
        'marker.line.color': ['transparent'], 
        'marker.line.width': [0]
      }, [curveNum]);
    });
  }")

关键说明 #

• Plotly的图例样式由对应迹线的第一个数据点决定，这是原问题中只有hover第一个条形时图例才变化的核心原因。
• 两种方案都添加了plotly_unhover事件处理，避免鼠标离开后边框残留。

内容的提问来源于stack exchange，提问作者thothal