Plotly.js模式栏图标分组覆盖图例，如何调整为单行布局？

Hey there! 我之前也碰到过完全一样的问题——Plotly默认要是modebar里的按钮太多，就会自动分组折叠，还总挡着图例，特别闹心。给你两个亲测有效的调整方向，帮你搞定：

1. 精简modebar按钮，强制单行显示 #

默认modebar带的按钮数量不少，超过阈值就会自动分组。你可以通过config配置项手动指定要保留的按钮，控制数量来避免分组。比如只留下常用的缩放、平移、重置这类功能：

// 在调用Plotly.newPlot时添加config配置
Plotly.newPlot('myDiv', yourData, yourLayout, {
  modeBarButtons: [
    ['zoom2d', 'pan2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d'],
    ['hoverClosestCartesian'],
    ['toggleSpikelines']
  ],
  // 固定modebar在顶部，避免往下挤压导致分组
  modeBarVerticalAlign: 'top'
});

2. 错开modebar和图例的位置，避免重叠 #

如果你的图例默认在右侧，刚好和modebar撞位置，那可以把图例移到左侧，同时把modebar固定在右侧顶部，彻底错开空间：

// 先在layout里调整图例位置
const yourLayout = {
  // ... 你的其他布局配置
  legend: {
    x: 0,          // 把图例靠左放置
    y: 1,
    xanchor: 'left' // 图例左对齐，避免占太多空间
  }
};

// 再在config里固定modebar的位置
Plotly.newPlot('myDiv', yourData, yourLayout, {
  modeBarHorizontalAlign: 'right', // modebar靠右
  modeBarVerticalAlign: 'top',     // modebar靠顶
  margin: {l: 120} // 给左侧图例留出足够空间，别挤到图表内容
});

要是你不想精简按钮，还可以试试把modebar移到底部，用modeBarVerticalAlign: 'bottom'，这样也不会和顶部的图例冲突~

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