如何使虚线图居中？

Posted 2023-03-05

【中文标题】如何使虚线图居中？

【英文标题】：How to center a dash graph?

【发布时间】：2021-04-16 03:01:42

【问题描述】：

我正在尝试使虚线图居中。情节在一个盒子里，即使我改变了高度，尝试使用这个答案来居中元素：https://***.com/a/1725782 但是图表仍然显示这样的空白：

这是带来此图表的当前代码 我尝试增加高度，但也没有用。

          html.Div(
                    dcc.Graph(id="backwards", responsive=True),
                    style=
                        "width": "68%",
                        "height": "800px",
                        "display": "inline-block",
                        "border": "3px #5c5c5c solid",
                        "padding-top": "5px",
                        "padding-left": "1px",
                        "overflow": "hidden",
                        "top": "50%",
                        "left": "50%",
                        "margin-top": "-400px"
                    ,
                )

情节布局代码

fig.update_layout(
            height=2000,
            width=870,
            hoverlabel=
                "font": "family": "monospace",
            ,
            template = "plotly_dark",
            font="family": "monospace", "size": 18,
            
            margin=
                "pad": 0,
                "t": 0,
                "r": 0,
                "l": 0,
                "b": 0,
            ,
        )
        fig.update_traces(showlegend=False)

【参考方案1】：

that 中的答案元素将以特殊尺寸居中

如果您想集中任何尺寸的元素，请尝试用您的样式替换以下代码

style=
    "width": "68vh",
    "height": "800px",
    "display": "inline-block",
    "border": "3px #5c5c5c solid",
    "overflow": "hidden",
    "position": "absolute",
    "top": "50%",
    "left": "50%",
    "transform": "translate(-50%, -50%)"

注意：您应该将height 68vh 设置为与此示例中的 68% 相同，transform translate 需要此设置

【讨论】：

感谢您的回答，但它对我不起作用。它仍然以某种方式在图形居中时留下空白。

【参考方案2】：

在包含图表的 div 周围再添加一个 div，就可以了。

html.Div(
                    html.Div(
                        dcc.Graph(
                            id="backwards", 
                            responsive=True,
                            style=
                                "width": "100%",
                                "height": "100%"
                            
                        ),
                        style=
                            "width": "100%",
                            "height": "100%",
                        ,
                    ),
                    style=
                            "width": "68%",
                            "height": "800px",
                            "display": "inline-block",
                            "border": "3px #5c5c5c solid",
                            "padding-top": "5px",
                            "padding-left": "1px",
                            "overflow": "hidden"
                        
                )