plotly.js 图例与图形重叠

Posted 2023-02-18

【中文标题】plotly.js 图例与图形重叠

【英文标题】：plotly.js legend overlap the graph

【发布时间】：2018-08-09 14:07:26

【问题描述】：

请看示例截图 - 除了在这个网站上，我无法重现，这似乎与 css 有一些冲突，但有什么想法吗？

通常，如果没有足够的水平空间，则将图例移动到顶部。但是，此示例显示图例与图形重叠。即使我使图例方向水平，它仍然与图形重叠。

您知道为什么会发生这种情况吗？

【参考方案1】：

调整标准化坐标中的图例位置应该会有所帮助。另见here。 即：

layout = go.Layout(
     legend="x" : 1.2, "y" : 1
)

【参考方案2】：

将图例放在情节之外对我有用：

var layout = 
  showlegend: true,
  legend: 
    x: 1,
  
;

【参考方案3】：

由 css 向导 https://tiki.org/item6567 (Luci) 修复：

.js-plotly-plot .plotly .main-svg overflow: visible
.js-plotly-plot .plotly .main-svg .legend transform: translate(640px, 100px)