Как написать макет приложения в Da sh, чтобы два графика располагались бок о бок? - PullRequest
Новая
       60

Как написать макет приложения в Da sh, чтобы два графика располагались бок о бок?

2 голосов
/ 19 июня 2020

Я хочу построить две диаграммы рядом (а не одну над другой) в Da sh от Plotly. В учебниках не было примера, где графики построены рядом.

Я пишу app.layout следующим образом 

app.layout = html.Div(className = 'row', children=

    [
        html.H1("Tips database analysis (First dashboard)"),
        dcc.Dropdown(id='d',
                     options = col_options,
                    value = 'Sun'),
        dcc.Graph(id="graph1"),
        dcc.Graph(id="graph2")
    ]

)

, но после этого graph1 появляется выше graph2, а не рядом

1 Ответ

2 голосов
/ 19 июня 2020

Этого можно добиться, заключив графики в div и добавив свойство display: inline-block css к каждому из графиков. 

app.layout = html.Div(className='row', children=[
    html.H1("Tips database analysis (First dashboard)"),
    dcc.Dropdown(),
    html.Div(children=[
        dcc.Graph(id="graph1", style={'display': 'inline-block'}),
        dcc.Graph(id="graph2", style={'display': 'inline-block'})
    ])
])

Результат Side-by-side Graphs

EDIT

Я удалил свойство display: flex из оборачивающего div, и вместо этого добавили свойство display: inline-block к каждому из графиков. Благодаря этому второй график не обрезается, а вместо этого будет складываться на экранах меньшего размера.

...