如何在Dash Python中并排放置两个图形

Question

我试图把这两个图表并排在破折号，我已经使用了内联块，但它仍然不工作，谁能帮助我这里?

app = dash.Dash(__name__)
app.layout = html.Div([

html.Div([
html.H1('Vacunados por covid'),
#html.Img(src='assets/vacuna.png')
], className = 'banner'),
html.Div([
html.Div([
html.P('Selecciona la dosis', className = 'fix_label', style={'color':'black', 'margin-top': '2px'}),
dcc.RadioItems(id = 'dosis-radioitems', 
labelStyle = {'display': 'inline-block'},
options = [
{'label' : 'Primera dosis', 'value' : 'primera_dosis_cantidad'},
{'label' : 'Segunda dosis', 'value' : 'segunda_dosis_cantidad'}
], value = 'primera_dosis_cantidad',
style = {'text-aling':'center', 'color':'black'}, className = 'dcc_compon'),
], className = 'create_container2 five columns', style = {'margin-bottom': '20px'}),
], className = 'row flex-display'),
html.Div([
html.Div([
dcc.Graph(id = 'my_graph', figure = {}),
], className = 'create_container2 eight columns', style={'display': 'inline-block'}),
html.Div([
dcc.Graph(id = 'pie_graph', figure = {})
], className = 'create_container2 five columns')
], className = 'row flex-display', style={'display': 'inline-block'}),
], id='mainContainer', style={'display':'flex', 'flex-direction':'column'})

Answer 1

请参考以下代码:

import pandas as pd
import numpy as np
import plotly.express as px
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
app = dash.Dash(__name__)
app.layout = html.Div([
html.Div([
html.H1('Vacunados por covid'),
#html.Img(src='assets/vacuna.png')
], className = 'banner'),    
html.Div([
html.Div([
html.P('Selecciona la dosis', className = 'fix_label', style={'color':'black', 'margin-top': '2px'}),
dcc.RadioItems(id = 'dosis-radioitems', 
labelStyle = {'display': 'inline-block'},
options = [
{'label' : 'Primera dosis', 'value' : 'primera_dosis_cantidad'},
{'label' : 'Segunda dosis', 'value' : 'segunda_dosis_cantidad'}
], value = 'primera_dosis_cantidad',
style = {'text-aling':'center', 'color':'black'}, className = 'dcc_compon'),
], className = 'create_container2 five columns', style = {'margin-bottom': '20px'}),
], className = 'row flex-display'),

html.Div([
html.Div([
dcc.Graph(id = 'my_graph', figure = {}),
], style={'width': '69%','display': 'inline-block'}),
html.Div([
dcc.Graph(id = 'pie_graph', figure = {})
], style={'width': '29%', 'display': 'inline-block'})
], className="row"),
], id='mainContainer', style={'display':'flex', 'flex-direction':'column'})
if __name__ == "__main__":
app.run_server(debug=False)

或者你可以学习关于行和列的破折号引导组件。