以编程方式使绘图区域在Plotly仪表板中具有相同的维度

Question

虽然下面两个图是在同一个容器div中呈现的，但它似乎是轴标记(以及其他东西？？)使实际渲染区域在最上面的地块上变小。

​

​

当轴被修改时，这在某种程度上是正确的：

​

​

最终，我想知道是否有可能使地块的宽度完全相同(不管轴的标题/标签/等等)？

下面是与上述解释相匹配的相关代码：

    ...

html.Div([
    html.Div(
        id="row-1-2",
        children=[
            html.Div(
                [
                    dcc.Graph(
                        id='plot1',
                        style={"height": "20vh", "margin": "0px"},
                    ),
                ],
                className="twelve columns",
            )
        ],
        className="row",
        style={"margin": "0px"},
    ),
    html.Div(
        id="row-2-2",
        children=[
            html.Div(
                [
                    dcc.Graph(
                        id='plot2',
                        style={"height": "20vh", "margin": "0px"},
                    ),
                ],
                className="twelve columns",
            )
        ],
        className="row",
        style={"margin": "0px"},
    ),
], className="three columns"),

    ...

Answer 1

尝试使用CSS属性宽度来呈现相同宽度的图形大小，如-

html.Div([
    html.Div(
        id="row-1-2",
        children=[
            html.Div(
                [
                    dcc.Graph(
                        id='plot1',
                        style={"height": "20vh", "width":"80vw", margin": "0px"},
                    ),
                ],
                className="twelve columns",
            )
        ],
        className="row",
        style={"margin": "0px"},
    ),
    html.Div(
        id="row-2-2",
        children=[
            html.Div(
                [
                    dcc.Graph(
                        id='plot2',
                        style={"height": "20vh", "width":"80vw", "margin": "0px"},
                    ),
                ],
                className="twelve columns",
            )
        ],
        className="row",
        style={"margin": "0px"},
    ),
], className="three columns"),

    ...

Answer 2

似乎我能得到的最接近的方法是在实际数字中将automargin设置为false：

fig.update_layout({"xaxis": {"automargin": False}})

​

​