Django + plotly-dash:无法并排渲染图形
Django + plotly-dash: cannot render graphs side to side
我已按照此 Subplot ( Side to side ) in python Dash and 进行操作,以找到一种在我的模板中并排渲染图形的方法。
我无法让它工作,图表的大小调整得很好,但它们一直渲染一个在另一个下面。我对出了什么问题感到困惑,因为我刚刚开始使用破折号,所以我正在努力找出问题的根本原因。
更新:作为评论中的divced,我已经尝试将 graph1 和 graph2 作为一个 div 标签的子项包含在其中并显示,但是它仍然不允许接下来得到两个图彼此。
这是我的文件的样子:
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
from django_plotly_dash import DjangoDash
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from django_plotly_dash import DjangoDash
import dash_table
import os
#external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
external_stylesheets = 'home/ubuntu/exostocksaas/staticfiles/css/style.css'
app = DjangoDash('tryout', external_stylesheets=external_stylesheets)
# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df_bar = pd.DataFrame({
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})
fig = px.bar(df_bar, x="Fruit", y="Amount", color="City", barmode="group")
app.layout = html.Div(children=[
# All elements from the top of the page
html.Div(children=[
html.Div(children=[
html.H1('Hello Dash'),
html.Div(''' Dash: A web application framework for Python.'''),
dcc.Graph(id='graph1',figure=fig, style={"width":500, "margin": 10,'display': 'flex'}),
html.H3('Hello Dash'),
dcc.Graph(id='graph2',figure=fig, style={"width":500, "margin": 10,'display': 'flex'}),
],
),
html.Div(children=[
html.H1('Hello Dash', style={"width":500, "margin": 0,'display': 'flex'}),
html.Div('''Dash: A web application framework for Python.''', style={"width":500, "margin": 0,'display': 'inline-block'}),
dcc.Graph(id='graph2',figure=fig, style={"width":500, "margin": 0,'display': 'flex'}),
]),
html.H1('Hello Dash'),
html.Div('''Dash: A web application framework for Python.'''),
dcc.Graph(id='graph3',figure=fig, style={"width":500, "margin": 0,'display': 'flex'}
),
], className='row'),
html.Div([
html.H1(children='Hello Dash'),
html.Div(children='''
Dash: A web application framework for Python.
'''),
dash_table.DataTable(
id='table',
columns=[{"name": i, "id": i} for i in df_bar.columns],
data=df_bar.to_dict('records'),
sort_action='native',
filter_action='native',
export_format='csv',
style_cell={'textAlign': 'center', 'font-size' : '16px','width': '10px',
'overflow': 'hidden'
},
style_data_conditional=[
{
'if': {'row_index': 'odd'},
'backgroundColor': 'rgb(248, 248, 248)'
}
],
style_header={
'backgroundColor': 'rgb(230, 230, 230)',
'fontWeight': 'bold',
'font-size' : '20px'
}
)
], className='six columns')
])
还是不行,我找不到让它工作的方法
我在本地 运行 并且有效。我删除了你的样式表,所以我可以在这里使用 style
属性显示 CSS。
html.Div(children=[
html.Div(
style=dict(display='flex', height=500),
children=[
html.H1('Hello Dash'),
html.Div(''' Dash: A web application framework for Python.'''),
dcc.Graph(id='graph1', figure=fig,
style={"width": 500, "margin": 10, 'display': 'flex'}),
html.H3('Hello Dash'),
dcc.Graph(id='graph2', figure=fig,
style={"width": 500, "margin": 10, 'display': 'flex'}),
],
),
], className='row'),
我已按照此 Subplot ( Side to side ) in python Dash and
我无法让它工作,图表的大小调整得很好,但它们一直渲染一个在另一个下面。我对出了什么问题感到困惑,因为我刚刚开始使用破折号,所以我正在努力找出问题的根本原因。
更新:作为评论中的divced,我已经尝试将 graph1 和 graph2 作为一个 div 标签的子项包含在其中并显示,但是它仍然不允许接下来得到两个图彼此。
这是我的文件的样子:
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
from django_plotly_dash import DjangoDash
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from django_plotly_dash import DjangoDash
import dash_table
import os
#external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
external_stylesheets = 'home/ubuntu/exostocksaas/staticfiles/css/style.css'
app = DjangoDash('tryout', external_stylesheets=external_stylesheets)
# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df_bar = pd.DataFrame({
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})
fig = px.bar(df_bar, x="Fruit", y="Amount", color="City", barmode="group")
app.layout = html.Div(children=[
# All elements from the top of the page
html.Div(children=[
html.Div(children=[
html.H1('Hello Dash'),
html.Div(''' Dash: A web application framework for Python.'''),
dcc.Graph(id='graph1',figure=fig, style={"width":500, "margin": 10,'display': 'flex'}),
html.H3('Hello Dash'),
dcc.Graph(id='graph2',figure=fig, style={"width":500, "margin": 10,'display': 'flex'}),
],
),
html.Div(children=[
html.H1('Hello Dash', style={"width":500, "margin": 0,'display': 'flex'}),
html.Div('''Dash: A web application framework for Python.''', style={"width":500, "margin": 0,'display': 'inline-block'}),
dcc.Graph(id='graph2',figure=fig, style={"width":500, "margin": 0,'display': 'flex'}),
]),
html.H1('Hello Dash'),
html.Div('''Dash: A web application framework for Python.'''),
dcc.Graph(id='graph3',figure=fig, style={"width":500, "margin": 0,'display': 'flex'}
),
], className='row'),
html.Div([
html.H1(children='Hello Dash'),
html.Div(children='''
Dash: A web application framework for Python.
'''),
dash_table.DataTable(
id='table',
columns=[{"name": i, "id": i} for i in df_bar.columns],
data=df_bar.to_dict('records'),
sort_action='native',
filter_action='native',
export_format='csv',
style_cell={'textAlign': 'center', 'font-size' : '16px','width': '10px',
'overflow': 'hidden'
},
style_data_conditional=[
{
'if': {'row_index': 'odd'},
'backgroundColor': 'rgb(248, 248, 248)'
}
],
style_header={
'backgroundColor': 'rgb(230, 230, 230)',
'fontWeight': 'bold',
'font-size' : '20px'
}
)
], className='six columns')
])
还是不行,我找不到让它工作的方法
我在本地 运行 并且有效。我删除了你的样式表,所以我可以在这里使用 style
属性显示 CSS。
html.Div(children=[
html.Div(
style=dict(display='flex', height=500),
children=[
html.H1('Hello Dash'),
html.Div(''' Dash: A web application framework for Python.'''),
dcc.Graph(id='graph1', figure=fig,
style={"width": 500, "margin": 10, 'display': 'flex'}),
html.H3('Hello Dash'),
dcc.Graph(id='graph2', figure=fig,
style={"width": 500, "margin": 10, 'display': 'flex'}),
],
),
], className='row'),