Plotly分组柱状图如何仅显示当前悬浮元素的hover信息

解决方法 #

你只需要在布局配置中新增hovermode: 'closest'参数即可。默认情况下分组柱状图的hover模式会匹配相同X轴坐标的所有数据系列，改为closest后就只会展示鼠标当前悬浮的单个柱子的信息。

修改后的完整代码如下：

var trace1 = {
  x: ['giraffes', 'orangutans', 'monkeys'],
  y: [20, 14, 23],
  name: 'SF Zoo',
  type: 'bar'
};

var trace2 = {
  x: ['giraffes', 'orangutans', 'monkeys'],
  y: [12, 18, 29],
  name: 'LA Zoo',
  type: 'bar'
};

var data = [trace1, trace2];
var layout = {
  barmode: 'group',
  hovermode: 'closest' // 新增该配置项
};
Plotly.newPlot('myDiv', data, layout);

如果需要进一步自定义悬浮提示的展示内容，可以单独给每个trace配置hoverinfo参数，指定要展示的字段。

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