如何在 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)

或者您可以了解带有行和列的破折号 bootstrap 组件。

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

How to put two graphs side by side in Dash Python

python

deployment

graph

plotly

plotly-dash