覆盖 x 轴标签的 Python Dash 图图例答案

【问题标题】：Python Dash graph legend covering x-axis labels覆盖 x 轴标签的 Python Dash 图图例
【发布时间】：2020-04-02 22:25:52
【问题描述】：

我的 Python Web 应用程序有一个 Plotly Dash “Graph”，其图例涵盖了 x 轴标签。我尝试调整以下元素，但没有成功，也没有明显的变化：

图例样式'margin-top'
边距'b'
填充'b'

代码如下：

    import dash
    import dash_core_components as dcc
    import dash_html_components as html

    graph = dcc.Graph(
        figure = {
            'data': data, 
            'layout': dict(
                hovermode = "closest",
                height = 400, # 500 is a bit too big on a smartphone
                legend = dict(
                    font=dict(color='#7f7f7f'), 
                    orientation="h", # Looks much better horizontal than vertical
                    style={'margin-top': 100},
                ),
                font = {
                    'family': 'Segoe UI', 
                    'color': "#7f7f7f"
                },
                # Added more margin on the left side to fix the cutoff True/False labels on the booleans
                margin = dict(l=40, r=25, b=10, t=10),
                padding = dict(l=0, r=0, b=10, t=0),
            )
        }
    )

这是它的样子，显示与 x 轴标签重叠的图例：

【问题讨论】：

标签： python plotly-dash plotly-python

【解决方案1】：

我在文档中找到了解决方案here。

y 父：layout.legend 类型：介于或等于 -2 和 3 之间的数字设置图例的 y 位置（在标准化坐标中）。默认为“1” 垂直图例，默认为“-0.1”，用于不带范围滑块的图表上的水平图例，默认为“1.1”，用于带有一个或多个范围滑块的图表上的水平图例。

它默认为 -0.1 所以我将它设置为 -0.15，它稍微低一点，以便给 x 轴标签更多空间。

import dash
import dash_core_components as dcc
import dash_html_components as html

graph = dcc.Graph(
    figure = {
        'data': data, 
        'layout': dict(
            hovermode = "closest",
            height = 400, # 500 is a bit too big on a smartphone
            legend = dict(
                font=dict(color='#7f7f7f'), 
                orientation="h", # Looks much better horizontal than vertical
                y=-0.15
            ),
        )
    }
)

结果：

【讨论】：