plotly.js 图例与图形重叠答案

【问题标题】：plotly.js legend overlap the graphplotly.js 图例与图形重叠
【发布时间】：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)}

【讨论】：