Django + plotly-dash：无法并排渲染图形

Question

我已经按照 Subplot ( Side to side ) in python Dash 和 How to add multiple graphs to Dash app on a single browser page? 来寻找一种方法来让图形在我的模板中并排呈现。

我无法让它工作，图表的大小调整得很好，但他们一直在渲染一个低于另一个。我对出了什么问题感到困惑，当我刚刚开始使用 dash 时，我正在努力找出问题的根本原因。

更新：正如 cmets 中所建议的那样，我尝试将 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')
    
])

仍然没有运气，我找不到让它工作的方法

Answer 1

我在本地运行它并且它有效。我删除了你的样式表，所以我可以在这里使用 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'),