python - 如何使用 bootstrap 设计我的 Plotly Dash 应用程序？

Question

这是我的代码。 我正在尝试将两个图表彼此对齐。

最简单的方法是什么？

    ########### Display the chart
    app = dash.Dash()
    server = app.server

    app.layout = html.Div(style={'backgroundColor': '#000000'},children=[
        html.H1('Indicator'),
        dcc.Graph(
            id='Teste1',
            figure=client_relation
        ),

        dcc.Graph(
            id='Test2',
            figure=beer_fig
        ),


        ]
    )

    if __name__ == '__main__':
        app.run_server()

Answer 1

我正在使用这段代码。将样式添加为“inline-block”到您的代码中，以使两个图表都在一条直线上。 将两个图表包含在一个 html block 中。

dcc.Graph(id='my_graph1',style={'width':1000, 'display': 'inline-block'},
        figure=go.Figure(
            data =[trace1, trace2],
            layout = go.Layout(
            title=' nifty',

            xaxis=dict(
                #domain=[0.03, 0.9]
                title='Date',
            ),
            yaxis=dict(
                title='Nifty',
                side='right',
            ), 
        ),

dcc.Graph(id='Pie',style={'width': 500, 'display': 'inline-block'},
),

html.Hr(),

希望您能采纳并修改。