使用Dash (Python)移动对象(条形图)
使用Dash (Python)移动对象(条形图)
提问于 2018-07-05 22:28:10
我想把一辆酒吧车移到一页中间。我用下面的代码创建了条形图：
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='''
Dash: A web application framework for Python.
'''),
dcc.Graph(
id='example-graph',
style={
'height': 500,
'width': 900,
'display': 'inline-block'},
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
],
'layout': {
'title': 'Dash Data Visualization'
}
}
)
])
if __name__ == '__main__':
app.run_server(debug=True)我想把这个图表移到页面的中间。有没有一种方法可以指定条形图的具体坐标？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-09 03:06:21
如果只想将图形居中，则必须将margin-left和margin-right设置为auto，并且需要在图形的样式字典中将display指定为block。
如下所示：
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='''
Dash: A web application framework for Python.
'''),
dcc.Graph(
id='example-graph',
style={
'height': 500,
'width': 900,
"display": "block",
"margin-left": "auto",
"margin-right": "auto",
},
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
],
'layout': {
'title': 'Dash Data Visualization'
}
}
)
])
if __name__ == '__main__':
app.run_server(debug=True)结果是这个布局：
如果您希望所有内容都居中，可以将margin指定为auto，并在父div元素上将width设置为50%，如下所示：
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='''
Dash: A web application framework for Python.
'''),
dcc.Graph(
id='example-graph',
style={
'height': 500,
'width': 900,
},
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
],
'layout': {
'title': 'Dash Data Visualization'
}
}
)
],style = {'margin':'auto','width': "50%"})
if __name__ == '__main__':
app.run_server(debug=True)结果是这个布局：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51193845
复制相关文章
相似问题