我正在尝试将虚线图居中。该图位于一个盒子中,即使我更改了高度,也尝试使用以下答案将元素居中:https://stackoverflow.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"
},
)
plotly布局代码
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)
在包含图表的 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"
}
)
要将图表居中,请使用 'marginLeft': 'auto', 'marginRight': 'auto'。样式字典中的键采用驼峰命名法。因此,它不是 text-align,而是 textAlign,如此处所述。
占据垂直和水平高度 75% 的 dcc 图的布局如下所示:
app.layout = html.Div([
html.Div(children='Centered graph example:', style={'textAlign': 'center'}),
dcc.Graph(
id='example-graph',
style={'width': '75vh', 'height': '75vh', 'marginLeft': 'auto', 'marginRight': 'auto'},
figure=fig
)
])